HELP NEEDED ! Hide Sold Out Variants on Prestige Theme

HELP NEEDED ! Hide Sold Out Variants on Prestige Theme

ma5
Tourist
8 0 2

Hi !

I have tried different ways to hide sold-out variants from drop down but nothing is working for me right now.I also tried this ( https://shopify.dev/tutorials/customize-theme-hide-variants-that-are-sold-out ) but still the sold out variants are not hiding.. Need some direction here for this issue.

Thanks.

Replies 11 (11)

diego_ezfy
Shopify Partner
2969 571 915

Hello,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

Kind regards,
Diego

ma5
Tourist
8 0 2

Hi Diego !

Currently i am trying to hide sold out variants of this product : https://childrenchic.com/collections/girls-mary-janes/products/girls-childrenchic-classic-azure-velv...

I am using Prestidge theme on my store. Any idea for hiding soldout variants in dropdown or add text infront of soldout variant in the dropdown.

Expert_Abubakar
Shopify Partner
2 0 1

Under snippets. Replace this code in product-from.liquid at line 194. This code is for POPOVER selector. 

 

{%- for value in option.values -%}
<button type="button" class="Popover__Value {% if value == option.selected_value %}is-selected{% endif %} Heading Link Link--primary u-h6"
data-value="{{ value | escape }}"
data-option-position="{{ option.position }}"
data-action="select-value">
{{- value | escape -}}
</button>
{%- endfor -%}


With the below code. 

{%- for variant in product.variants -%}
<button type="button" class="{% unless variant.available %} hide_variant {% endunless %}Popover__Value {% if variant == selected_variant %}is-selected{% endif %} Heading Link Link--primary u-h6"
data-value="{{ variant.title }}"
data-option-position="1"
data-action="select-value">
{{ variant.title }}
</button>
{%- endfor -%}​



And then add this code in the theme.css file at the end. 

 

button.hide_variant {
display: none;
}
Bogidk
Visitor
1 0 0

Do you have another code for the "Block" Selector type?

Marrakech_Cloth
New Member
4 0 0

Hello, I have been trying to accomplish this with the Prestige theme following your directions but I can't seem to get it to work. Are the instructions different for Shopify 2.0? Also, is there a way to do this for the Block selector instead? 

Any assistance is much appreciated!

GreenMountains
New Member
8 0 0

Have you found out the solution to hide sold out variants? i am having the same problem, thanks!

GreenMountains
New Member
8 0 0

Hello tried adding the above, but the variant drop off stops working at all after i add the above code in the theme.css file at the end.

Could you please kindly help?

m-talha-amjad
Shopify Partner
2 0 2

If anyone is looking for this solution.

 

In product-form.liquid search for Swatch and place this in the label class.

class="SizeSwatch {% if product.variants[forloop.index0].available == false %} soldout {% endif %}"

After that based on this class use CSS to hide or fade out the variant options.

jorgesolis
New Member
5 0 0

Could you tell me how did you figured out ? I cant fin a solution yet

rajkmr
Shopify Partner
26 1 4

For the best results, you might want a developer to check your theme to add the required code to hide sold out variants on Prestige theme. For themes like Dawn, you probably can find code on GitHub. But nothing working is available for Prestige to the best of my knowledge. Check this similar post
If you are looking for an app based solution, you can try Camouflage

Camouflage - Hide sold out variants: https://apps.shopify.com/camouflage
JZ1
Visitor
1 0 0

Camouflage is a great solution!!