Solved

how to hide single variant label/button when only has one variant for a product? (Dawn Theme)

i_hussain
Excursionist
26 1 0

Hi there, 

I want to ask that how i can hide single vartiant label/button from my product page. As you can in screen shot i have different sizes for this jacket but i have only one color and fabric option for this product. So i want hide them from all product which has one variant. i am ussing free dawn theme version 13.0.1.

 

Screenshot (1292).png

Accepted Solution (1)
Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@i_hussain Please try hiding the variants using below steps instead of the one shared in previous comment. Let me know whether it is helpful for you.
 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search for "product-variant-picker.liquid" file.
4. Keep the code "{% assign variant_count = option.values | size %}" added next to the line {%- for option in product.options_with_values -%}
5Remove the codes {% if variant_count > 1 %} and {%- endif -%} added previously.
6. Then, find the "product-form__input--pill" and "product-form__input--dropdown" class names and paste the below code next to the both classes like in the attached screenshot.

 

{% if variant_count <= 1 %} hide_single_variant{% endif %}

 

Vinsinfo_0-1713348535408.png
7. Search "base.css" file and paste below code at the bottom of the file.

 

.hide_single_variant {
    display: none !important;
}

 

 
Now, it will works fine as we expected.
Vinsinfo_1-1713349003626.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 19 (19)

saim007
Shopify Partner
496 64 83

@i_hussain Please always provide store url and password if have when seeking for the help so we can help you!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
i_hussain
Excursionist
26 1 0

Sorry, I didn’t share it because it was mention that not to share password. And how can i share password in public forum. here is the URL: https://039dfb-a6.myshopify.com/

saim007
Shopify Partner
496 64 83

@i_hussain I was asking for the store front-end password if have i don't require back-end admin side password!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
i_hussain
Excursionist
26 1 0

Sorry, i am new on shopify so i don't have any idea about it. Can you please tell me where i can find front end URL and password so, i can share with you.

theycallmemakka
Shopify Partner
1484 337 360

If you only have one variant, you should not add any options. This way product with one variant will be created.

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

i_hussain
Excursionist
26 1 0

I have to add them to appear on google merchant otherwise it will show errors in google merchant, and i saw few solution around internet but those are not working properly.

saim007
Shopify Partner
496 64 83

@i_hussain If we hide from the front-end then how Google Merchant Center will fetch your variant Color and Material in their Feed?

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
i_hussain
Excursionist
26 1 0

Google always used data feed, so thats why i want it in backend but not dont want show fromt-end

saim007
Shopify Partner
496 64 83

@i_hussain Then I suggest to don't create color and material variant and instead of this you can create Metafield options to add the color and material so your variant options will not show on the front-end without changing the existing code.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
i_hussain
Excursionist
26 1 0

How can i use meta-field? Is it like we used to create in collections?

Vinsinfo
Shopify Partner
265 96 87

@i_hussain Please follow the below steps to hide the variant that has only one option. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search for "product-variant-picker.liquid" file.
4. Find the line "{%- for option in product.options_with_values -%}" and paste below code next to this line like in the attached screenshot.

 

{% assign variant_count = option.values | size %}
{% if variant_count > 1 %}

 

Vinsinfo_0-1713334148743.png
5. Find the "<script type="application/json">" tag and add below code before the {%- endfor -%} as like in the below screenshot.

 

{%- endif -%}

 

Vinsinfo_1-1713334470672.png

 

 

Before and after code changes will be like below images for this product, https://039dfb-a6.myshopify.com/products/attack-on-titan-scouting-legion-leather-jacket.
Before: (Color dropdown is displayed)
Vinsinfo_3-1713334712484.png
 
After: (Color dropdown is not displayed)
Vinsinfo_2-1713334702270.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
i_hussain
Excursionist
26 1 0

It's Working, But there is another problem i saw after adding this code, as you can see in screenshot, when you click on variation its saying item is unavailable. you can check live product here https://039dfb-a6.myshopify.com/products/attack-on-titan-scouting-legion-leather-jacket

Screenshot (1293).png

saim007
Shopify Partner
496 64 83

@i_hussain Yes it will create an error because variant option is hide so without selecting the all variant options will not able to add to cart the product. The flow work like select Size option > Color option > Material option if all are the selected then add to cart button works well! Hiding the variants will create a problem for the flow functionality and google merchant too!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
i_hussain
Excursionist
26 1 0

So, that is no solution for this? 😥

saim007
Shopify Partner
496 64 83

@i_hussain I suggest to don't create color and material variant and instead of this you can create Metafield options to add the color and material so your variant options will not show on the front-end without changing the existing code.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@i_hussain Please try hiding the variants using below steps instead of the one shared in previous comment. Let me know whether it is helpful for you.
 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search for "product-variant-picker.liquid" file.
4. Keep the code "{% assign variant_count = option.values | size %}" added next to the line {%- for option in product.options_with_values -%}
5Remove the codes {% if variant_count > 1 %} and {%- endif -%} added previously.
6. Then, find the "product-form__input--pill" and "product-form__input--dropdown" class names and paste the below code next to the both classes like in the attached screenshot.

 

{% if variant_count <= 1 %} hide_single_variant{% endif %}

 

Vinsinfo_0-1713348535408.png
7. Search "base.css" file and paste below code at the bottom of the file.

 

.hide_single_variant {
    display: none !important;
}

 

 
Now, it will works fine as we expected.
Vinsinfo_1-1713349003626.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
i_hussain
Excursionist
26 1 0

i tried it, it's not working at all.

 

i_hussain_0-1713353789475.png

i_hussain_1-1713353827669.pngi_hussain_2-1713353841826.png

 

 

Vinsinfo
Shopify Partner
265 96 87

@i_hussain Please check the variable declaration code "{% assign variant_count = option.values | size %}" is there in the "product-variant-picker.liquid" file below the line "{%- for option in product.options_with_values -%}" as mentioned in the step 4. Let me know whether it is working for you or not.

i_hussain
Excursionist
26 1 0

sorry, i forget to keep this code {% assign variant_count = option.values | size %}, i just updated code again and now its working properly.

 

Thank you so Much 😊