Solved

Linking product Options and Hiding Sold Out Variants on Sectioned Themes

JonnyMac
Tourist
11 0 1

Hi there,

 

I've seen in numerous threads on this discussion board about hiding variants that are sold out.

 

I'm finding this quite the issue, as I have products with multiple variants. However, every option is not always in-stock, so it would be good for those to be hidden, otherwise, how is a customer to know without trying multiple combinations of variants before finding what's available.

 

This, to me, is a huge unfriendly user experience and something I would've thought a company as big as Shopify would've addressed already.

 

I see that there's documentation for this issue:

 

https://help.shopify.com/en/themes/customization/products/variants/link-product-options-in-menus

 

https://help.shopify.com/en/themes/customization/products/variants/hide-variants-that-are-sold-out

 

However these don't work with sectioned themes. These were released in 2016, so almost 3 years without an obvious solution for the new themes.

 

Is there a definitive solution to this? 

 

Thanks

 

Jonny

Accepted Solution (1)

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

Yes, for example here 

But the code is theme dependent -- it will work for free themes with drop-downs and will require modification for buttons/swatches or if drop-down elements have different classes assigned.

View solution in original post

Replies 21 (21)

Lixon_Louis
Shopify Partner
1193 35 267

Which theme are you using?

JonnyMac
Tourist
11 0 1

HI Lixon, thanks for the reply

 

I'm using Debut, but Tim below has also replied to link that seems to answer what I'm trying to solve, so will dive into that and see how it works

 

Thanks

 

Jonny

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

Yes, for example here 

But the code is theme dependent -- it will work for free themes with drop-downs and will require modification for buttons/swatches or if drop-down elements have different classes assigned.

JonnyMac
Tourist
11 0 1

Hi tim thanks for that

 

I'll give your solution a good look over and see how it goes

 

Thanks

 

Jonny

JonnyMac
Tourist
11 0 1

Tim you are a lifesaver

 

Thanks so much for your helpful reply

 

Jonny

Mohd_
Visitor
2 0 0

Hi Tim, thanks for sharing. i followed your instructions and successfully resolved the issue but some product pages have become Unresponsive and never load so, would you please advice how could i solve this issue!! Thank you

tim
Shopify Expert
3258 232 1178

Hard to tell without seeing. It would be good if you can share the preview link to your theme and point at these offending products...

pinDev
Shopify Partner
1 0 0

Trying to also use the approach above with the Symmetry theme (https://themes.shopify.com/themes/symmetry/styles/beatnik) but not working. The theme.liquid file doesn't have that line defer="defer". It has this instead: {{ 'vendor.js' | asset_url | script_tag }}

Any suggestions? 

 

Example:

Products available: (White 1, 10) and (Black 4, 30), but all these options below are showing in the drop-down...

Color: White and Black

Sizes: 1, 2, 3, 4

Width: 10, 20, 30, 40

tejashweta
Shopify Expert
3 0 1

We are also facing the same issue. 

 

My client has 3 Size but in all Size Different Color require. 

For e.g 

Size is Small, Medium, Large

Color:  Small (Black and White)

Color:  Medium (Black and Gray) white not required

Color:  Large (Gray and Red) White and Black Both Options not required

 

in Product Details Page Its showing all colors. How to change Color as per Size Selected. 

Mohd_
Visitor
2 0 0

Hi Tim, Sorry i've just noticed your reply right now. How can i send you a preview link of the theme? you mean a screenshot? if yes what part of the theme you want a screenshot of? let me clarify more the issue, I currently have two categorize of products on the store (both are shoes), after installing the codes i had the 1st product linking options enabled and work very well, but the other product it's product page never load and crashes. I am really wondering what is wrong with that second product and why it is not responsive to the codes as the first product. Thanks in advance Tim.

Sidchamdia
Visitor
1 0 0

Hi,
Could you please help. We are using three options for Product Variation but its not linked. When we choose the Product from 1st Variation Second and Third dropdown menu dont hide the variation which are not available.

Shop : https://snsappareluk.myshopify.com/products/yourway-mix?variant=40927399870651

Pass : tholdu

Thanks

markboehlen
Shopify Partner
12 0 1
jbulc001
Visitor
1 0 0

I am working with the Venture theme and I just noticed that most of my products that have two variant options are not linking to each other when one is clicked. For Example: We have multiple styles with certain sizes assigned, some styles don't support the other sizes. This is causing it to show unavailable. How do I get the style to link to it's assigned size when clicked? I have tried integrating a couple of different custom codes but nothing is working. Please Help! Thanks!

MattCH
Visitor
1 0 0

Hi JB;

Did you ever get this figured out?  I am working in the Venture theme as well and encountering this same issue.

Thanks.

moonsmumble
Visitor
2 0 0

Hi Tim! Your solution worked!! But rather than hidden the option, I want the sold out option to just be disable. do you know which code should I change? Thank you in advance!!


@tim wrote:

Yes, for example here 

But the code is theme dependent -- it will work for free themes with drop-downs and will require modification for buttons/swatches or if drop-down elements have different classes assigned.


 

mayasplaceny
Tourist
7 0 3

Hi Tim, 

I see that you were able to help numerous people. I too have many products that have many variants and need to hide the sold out variants. We are using the supply theme any help would be greatly appreciated. The shopify gurus said there is nothing they can do HELP! 🙂



 

heyitslynneg
Visitor
1 0 0

Hi Tim - I'm using Boundless but I don't see custom.js or the other .js file on your instruction. 

Tawalbeh
Visitor
1 0 0

Can you please provide the same for Dawn?

nadinecharles
Shopify Partner
3 0 0

Hi Tim. The link is https://community.shopify.com/c/shopify-design/bd-p/ecommerce-design/redirect_from_archived_page/tru... and goes to a general forum page. Please provide an updated link for the solution. Thanks

SirensongJamie
Visitor
2 0 0

Broken link! Can we get a redirect?

rainbownation
Excursionist
17 0 4

I've just used the details in this link in Minimal. Thanks for sharing.