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

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
460 158 155

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 20 (20)

saim007
Shopify Partner
609 74 103

@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
609 74 103

@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
1709 412 431

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

Support Me: Buy me a Coffee


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
609 74 103

@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
609 74 103

@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
460 158 155

@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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center 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
609 74 103

@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
609 74 103

@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
460 158 155

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center 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
460 158 155

@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.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
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 😊

mj122
Visitor
1 0 0

please could you guide me on how to do the same for my store. I'm using free turbo theme version 3.01 - there isn't a file in my edit code section called "product-variant-picker.liquid" file. TIA