How can I remove the default variant selection so that the user has to select a variant manually?

Online Store and Theme Development
1

he user must manually select the variant (e.g., color, size). If the user tries to click ‘Add to Cart’ without selecting a variant, a pop-up message should appear saying: 'Please select a size, color, or other variant before adding to cart. Please help me say a thank you message. I have successfully achieved the functionality where variants must be selected before ‘Add to Cart’. Now I just need help to show the pop-up when ‘Add to Cart’ is clicked without selecting a variant."

2

Hi @Abdul_Sattar

How to set this up would depend on the theme you’re using, but at a high level you’d want to:

  • Ensure that no variant is pre-selected when the product page loads. This is usually done by not setting a default value in your variant selectors, or by clearing the selection on page load.
  • In your product form, use JavaScript to check if a variant has been selected before allowing the “Add to Cart” action to proceed.
  • Add a JavaScript event listener to the “Add to Cart” button. If no variant is selected, you prevent the form submission and display your custom pop-up message.
3

Thanks , Liam , I have successfully created a new product template with a professional look. The theme I was using had all the variant logic inside variant.js, but there was no main product.liquid template. I manually added everything into the JS file. However, it’s all working well now — it’s a great achievement! The new product page and template are working perfectly, and the variant popup is displaying correctly.

4

I faced the same issue, but did not want to interfere too much with the inner workings of variant selection. The actual problem we were facing was users not realising that they needed to select a size - they probably selected their size on one product page, decided (not unreasonably) that once they’d done that, their preference would persist across products, then when they finally added a different product to cart, the first variant was selected and they ended up buying it, kicking off customer service requests, complaints, recalled packages etc etc.

Trying to implement a system by which the chosen size was persisted across products led to all sorts of issues (people adding the wrong size, but not knowing they had, the wrong size being auto-selected, all sorts of crap) and really our objective here was just to give the customer a hint as to what size they were adding to basket.

So I decided to just update the Buy Button text when a size was selected (and initially on page load). Instead of just ‘Add to cart’, I wanted ‘Add [SIZENAME] to cart’.

Listening for clicks on the size pills didn’t work: the listener only fired once per page load (the root cause of the issues I described above). Shopify does a lot of re-rendering when a new size is selected, and it kills your listeners.

There was lots of talk on here about a built-in variant:change handler - that didn’t work. Couldn’t find any official documentation, either.

on the GitHub page for the Dawn Theme, multiple requests for this feature - no auto-selection of variants - had been responded to positively, but the the issue had been closed as ‘not planned’. No help there.

I ended up making a small change to handleOptionValueChange() in product-info.js, around line 63:

handleOptionValueChange({ data: { event, target, selectedOptionValues } }) {

        if (!this.contains(event.target)) return;

        this.resetProductFormState();

        if(typeof handleSizeChange === 'function'){

          handleSizeChange(selectedOptionValues);

        }

The meat here is just the call to my custom function handleSizeChange() in a different file - for safety reasons, just in case I get any race conditions, I wrapped it inside a typeof check to make sure the function exists before I call it.

The selectedOptionValues array is passed in to handleSizeChange - within that, I get the second element, cross-ref that against the size options on the page, get the size name and insert it into the Buy Button text, with a slight delay built in using setTimeout() so that Shopify is definitely done with any re-rendering of the buy button, which happens on every variant change. The end result is that the buy button now says ‘Add 6 F to cart’ instead of just ‘Add to cart’, so even the least observant customer is going to realise they need to select their size.

Call handleSizeChange once on page load, too, with the appropriate starting value.

There’s obviously more in handleSizeChange - checking values are valid etc etc - but that will depend on your site.

Hope this helps someone.

G