Goal: Require shoppers to choose a product variant before the Add to Cart (ATC) button activates, with a default dropdown placeholder like “Pick an option,” in a Shopify Online Store 2.0 (OS 2.0) theme (Sense).
Context: OS 2.0 themes often render variants via Liquid objects (product.options_with_values, product_option) and JavaScript, not just simple dropdowns. Sense (a Dawn-based theme) uses variant picker components and global.js to manage selections and the ATC state; implementation details are theme-specific.
References provided: Sense/Dawn code snippets and JS (product-variant-options.liquid, product-variant-picker.liquid, global.js), a Sense demo link, and Shopify dev docs. These are central for a custom solution.
Options discussed:
Status: No step-by-step code shared; outcome not fully resolved. Latest guidance favors using an app or commissioning custom changes.
Hi all,
I’ve been using vintage themes for years and have decided to look into migrating to 2.0 at some point soon.
Do any of you know how to achieve the same result in 2.0 as in this tutorial for vintage? Tutorial link: https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-pick-an-option
I need to get customers to pick an option before ATC button is activated.
Any help would be greatly appreciated.
Best,
Al
Hi @AlBu07 Most newer themes don’t use drop downs or parse variants instead using objects like product.options_with_values or the product_options objects to generate options buttons/swatches that javascript then uses to associate to a variant.
Making this still an advanced theme customization that varies by theme and structure of the products options for variants.
If you need this customization for an OS2.0 theme then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Thanks for getting back to me.
I’m working on customizing Shopify’s own Sense theme and from what I’ve seen so far, it still has dropdowns and similar method of defining variants.
Yes in the admin for defining variants not much has changed.
For the theme itself it still depends if it’s a feature or which setting you choose.
i.e. buttons https://theme-sense-demo.myshopify.com/products/natural-vegan-lip-balm-lemon-lime
Similarly to the Debut theme which I’ve been using for years, Sense theme gives an option to choose between buttons/dropdown for variant selection on frontend. That’s why I’m under the impression that a similar modification can be done to make users pick an option before atc is activated.
The impression is right it can be similar in concept but the details have to be stepped through.
Sense being a dawn theme uses html components for variant-selects
https://github.com/Shopify/dawn/blob/main/snippets/product-variant-options.liquid
https://github.com/Shopify/dawn/blob/main/snippets/product-variant-picker.liquid
https://github.com/Shopify/dawn/blob/main/assets/global.js#L955
etc
Good Luck.
Hello, this is possible in 2.0 themes using code (dropdown variant options - if not available in your theme) but would require too much work to post here, and can be somewhat complex. My advice would be:
-Hire an expert to make these changes, cost should be relatively low. (We can help with this if needed, here is an EXAMPLE of the same thing in a store we work with)
-Use a Shopify app with your new 2.0 theme such as Globo Product Options. This allows you to use dropdowns and other elements for customers to select their product option.
I hope that helps. Don’t hesitate to reach out for further help with your store!
@biznazz101
Hi, I do appreciate you getting back to me.
However, the example you provided is not what I’m looking for. Just like explained in the tutorial, I need the dropdown menu to say “pick on option” and have the atc button disabled, rather than having the first variant selected by default. In your store example you have a label above the dropdown menu, which is fairly easy to do.
Yes I understand, pretty sure the Globo app in the link above can do exactly what you are describing. A placeholder: “Pick an option” where the customer must choose a variant option from the dropdown in order for the ATC button to work. If not, another app may have this function there are many similar ones in the Shopify app store.
Otherwise, you will probably need to hire someone to make the necessary changes to your stores theme files.
@biznazz101