Linking product Options and Hiding Sold Out Variants on Sectioned Themes

[JonnyMac]

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

[Lixon_Louis]

Which theme are you using?

[JonnyMac]

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

Hi tim thanks for that

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

Thanks

Jonny

[JonnyMac]

Tim you are a lifesaver

Thanks so much for your helpful reply

Jonny

[Mohd_]

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]

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]

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]

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

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]

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]

Here is an updated script.

https://gist.github.com/kyleboehlen/fd4ce2f4d24a16b74b1e4a30c914f32d

[jbulc001]

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]

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]

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]

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]

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

[Tawalbeh]

Can you please provide the same for Dawn?

[nadinecharles]

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]

Broken link! Can we get a redirect?

[rainbownation]

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