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.