How to remove the auto-checked option for variants (for example, 'size') in the Prestige theme?

[Bohdan5]

I need to implement logic in the Prestige theme.

Since many customers order items in the wrong size, my approach is to display a 'Select Size' button if a product has a size option.

Once the user selects a size,  (ATC) button will appear. However, I’m wondering how it would be best to implement this based on the existing theme logic. 

The problem is that I need to remove the auto-checked variant after the page loads and then apply the checked option to the selected variant.

Any advice would be helpful.

[DeborahNapoleon]

Got it! You're aiming to improve user experience by requiring customers to manually select a size before they can add the product to the cart—smart move, especially for reducing returns.

The Prestige theme typically auto-selects the first available variant on page load, and displays the Add to Cart (ATC) button immediately, which is what you want to change.

Here’s a clean approach to implement your logic:

---

🔧 Step-by-Step Plan:

1. Hide ATC Button by Default

In your product-form.liquid or similar file, wrap the ATC button in a container and hide it by default using CSS or inline style.

<div id="custom-atc-button" style="display: none;">
  {{ form | payment_button }}
</div>

2. Uncheck Default Variant on Page Load

Shopify themes auto-select the first variant, so we need to override that behavior using JavaScript.

You’ll typically find variant selectors using radio buttons or dropdowns. Here's how you can "uncheck" them for radio button style selectors:

document.addEventListener("DOMContentLoaded", function() {
  const variantRadios = document.querySelectorAll('input[type="radio"][name="option-0"]'); // assuming 'option-0' is for size

  variantRadios.forEach(radio => {
    radio.checked = false;
  });

  document.getElementById('custom-atc-button').style.display = 'none';
});

3. Show ATC Button Once a Size is Selected

Now we listen for a change in the size option and reveal the ATC:

document.querySelectorAll('input[type="radio"][name="option-0"]').forEach(radio => {
  radio.addEventListener('change', function() {
    document.getElementById('custom-atc-button').style.display = 'block';
  });
});

4. Disable Form Submission Until Size is Selected (Optional Safety Net)

Inside your product-form.js or custom script, prevent form submission if no variant is selected:

document.querySelector('form[action^="/cart"]').addEventListener('submit', function(e) {
  const selected = document.querySelector('input[type="radio"][name="option-0"]:checked');
  if (!selected) {
    e.preventDefault();
    alert("Please select a size before continuing.");
  }
});

---

Bonus Tips:

• If you're using dropdowns instead of radio buttons, just adjust the selectors accordingly.

• To make this feel smooth, add some animation for the ATC button appearance using CSS or animate.css.

• Test on mobile views too—Prestige theme sometimes renders selectors differently for small screens.

---

If you want, I can help tailor this to your specific product template file or help create a reusable snippet. Want to share your current setup?