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

Shopify Discussion

Topic summary

A merchant using Shopify’s Prestige theme wants to prevent customers from ordering wrong sizes by requiring manual size selection before showing the Add to Cart button.

The Problem:

  • Prestige theme auto-selects the first variant on page load
  • This leads to customers accidentally ordering incorrect sizes

Proposed Solution:

The approach involves four key steps:

  1. Hide the ATC button by default - Wrap it in a container with display: none

  2. Uncheck auto-selected variants - Use JavaScript on page load to deselect all size radio buttons

  3. Show ATC when size is selected - Add event listener to display button once user picks a size

  4. Add validation - Prevent form submission if no size is selected, with an alert message

Additional Considerations:

  • Code examples provided use radio button selectors but can be adapted for dropdowns
  • Mobile view testing recommended as Prestige may render selectors differently
  • CSS animations suggested for smoother button appearance

The discussion remains open for implementation details specific to the merchant’s setup.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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.

3 Likes
2

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:

:wrench: 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?

1 Like