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

[i_hussain]

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.

 

[saim007]

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

[i_hussain]

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]

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

[i_hussain]

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]

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

[i_hussain]

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]

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

[i_hussain]

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

[saim007]

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

[i_hussain]

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

[Vinsinfo]

@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 %}

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

{%- endif -%}

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)

After: (Color dropdown is not displayed)

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

[i_hussain]

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

 

[saim007]

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

[i_hussain]

So, that is no solution for this? 😥

[saim007]

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

[Vinsinfo · 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 -%}

5. Remove 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 %}

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.

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

[i_hussain]

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

[Vinsinfo]

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

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]

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