How can I hide unavailable variants?

[vancouver_k]

Hi there,

I have to lists of variants - frame type and frame size. Some frames come in different sizes from others so when a customer selects the frame type I only want the relevant sizes to be in the 'size' dropdown.

Currently it has a long list of sizes with loads of them crossed out, but I would like the crossed out sizes to be hidden so it's tidier and less confusing.

Could anyone advise what code would work for this and where to put it please? My theme is craft. Thank you

[Moeed]

Hey @vancouver_k 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[vancouver_k]

Hi there,

it's https://225e55-80.myshopify.com/products/personalised-80th-birthday-typography-print-test

PW is sduhsdjvdfhb

this is just a test product while I am figuring out how to do this

Thank you

[Moeed]

Hey @vancouver_k 

Follow these Steps:

1) Go to Online Store
2) Edit Code

3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<script>
document.addEventListener("DOMContentLoaded", function () {
    const select = document.querySelector(".select__select");

    if (select) {
        Array.from(select.options).forEach(option => {
            if (option.textContent.includes("Unavailable")) {
                option.style.display = "none"; 
            }
        });
    }
});
</script>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[vancouver_k]

Thank you! I will try it later on today and reply/mark as a solutions

i have asked another question and wondered if you new about this at all:

https://community.shopify.com/c/shopify-design/help-with-using-metafields-to-copy-product-variants-t...

thank you

[vancouver_k]

Hi there,

for some reason this hasn't worked. Any ideas how to fix it please?

[Moeed]

Can you share your collaborator code in my private messages so that I can have a proper look at it?

Best Regards,

Moeed

[Easify-Jolie]

Hi @vancouver_k 

I recommend using Easify Product Options! It’s a no-code, easy-to-use solution that lets you show only the relevant frame sizes based on the selected frame type and automatically hide unavailable options. This keeps your size dropdown clean and user-friendly—no more crossed-out options! Here's how it works: 

• This is the result:

• This is the app setting:

To ensure that when a customer selects the frame type, the relevant sizes to be in the 'size' dropdown—you just need to enable Conditional Logic in the Advance Settings and set it like this:

Also, if you want the crossed out sizes to be hidden so it's tidier and less confusing, you can go to Setting in the Easify app, and set the Out-of-stock options to Hide options.

You’ll find this app easy to use, so I hope you give it a try. If you need assistance, just let me know or reach out to Easify! 🤗

[vancouver_k]

I just want to add some code to my site but I'm sure the app is great.

If anyone can tell me what the correct code would be I'd be most grateful. Thanks

[Korben]

I'm having the same issue, tried a couple of bits of code but doesn't work, perhaps they are for previous template versions.