Solved

Hide variant selection box for products with single variant in supply theme

JoshP23
Tourist
4 0 1

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.

Accepted Solution (1)
LitExtension
Shopify Partner
4860 1002 1135

This is an accepted solution.

Hi @JoshP23,

Please change all code:

if($('.single-option-selector option').length < 2) {
    $('.single-option-selector').hide();
}

it will work fine

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 6 (6)

LitExtension
Shopify Partner
4860 1002 1135

Hi @JoshP23,

Please go to theme.js.liquid file and add code here:

Screenshot.png

Code:

if($('.single-option-selector option').length < 2) {
    $('.single-option-selector option').hide();
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
JoshP23
Tourist
4 0 1

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.

 

Normal.png

Code added.png

Desired.png

   

gr_trading
Shopify Partner
1689 141 176

Hi @JoshP23 ,

 

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.

hari1_prasad_0-1664390737737.png

 

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.

 

Hope this will help.

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
SiteBuilder
Excursionist
22 0 8

Hello, this seems to have changed since in Dawn theme, where should I put that line of code on current Dawn theme?

LitExtension
Shopify Partner
4860 1002 1135

This is an accepted solution.

Hi @JoshP23,

Please change all code:

if($('.single-option-selector option').length < 2) {
    $('.single-option-selector').hide();
}

it will work fine

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
JoshP23
Tourist
4 0 1

Thank you! This worked just how I wanted it to! I appreciate you sharing this knowledge with me.