Goal: Hide the variant dropdown for products that effectively have a single choice while keeping cart behavior intact (Supply theme). Auto-select the default variant.
Attempts/issues:
CSS (.selector-wrapper { display: none!important; }) hid all variant selectors, including products with multiple variants.
Commenting/removing the product form broke add-to-cart and cart drawer behavior.
Initial JS suggestion hid only the dropdown’s internal options, not the dropdown box.
Working solution (accepted):
In theme.js.liquid, add: if($(‘.single-option-selector option’).length < 2){ $(‘.single-option-selector’).hide(); }
Effect: When fewer than two options are present, the dropdown is hidden; default variant remains selected. This met the requirement.
Alternative (not confirmed by OP):
A Liquid-based conditional in main-product.liquid to toggle display, with notes about placement lines in Dawn. Logic/details were not validated in this thread.
Notes:
Screenshots were used to show before/after.
Terms: Variant = a specific option combination (e.g., size/color). Dawn is Shopify’s OS 2.0 default theme; Supply is a legacy theme.
Status: Resolved for Supply via JS. New follow-up question asks where to place the code in the current Dawn theme (unanswered).
Hello, I am trying to hide the variant selection drop down box for my products with only a single variant. I am using a customized version of the supply theme, and haven’t been able to get this to work properly. I have tried adding this code to the bottom of my theme.scss.liquid
.selector-wrapper {
display: none!important;
}
which hides all variant selections, but the problem is that I have some products that do contain variants.
The products with variants are using a separate product template, so I’m wondering if there is some code I can add to the main product-template.liquid that will apply to only the products using the default template?
I have tried commenting out the {% form ‘product’ … %} block, which hides the variant options, but breaks being able to add items to the cart. I have tried adding display=“none” to several places within that block, but that breaks the way we have our cart set up to pop up a small window with the cart, and instead sends to a separate page for the cart. We would like to retain the way our cart currently functions.
To be clear: We want products with only one variant to not display variant selection, and auto select the default variant when added to cart.
Thanks for your reply, I tried your code in the theme.js.liquid file, but all that did was make it so there were no options within the dropdown menu. I am looking to remove the box altogether.
Please use below code in main-product.liquid where variant code written.
{% if product.options_with_values.size > 1 %} style="display: none;"{% endif %}
In Shopify 2.0’s Dawn theme variant display available in two different looks, since as screenshot attached I can see you are using dropdown variant for your theme.
You have to place your code at line number 374, attaching screenshot for your reference.
Variant code are placed at three line 352 and 374. It’s better if you place on both place or group them into one tag and then use above suggested code.
