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."
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.
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.