How can I hide unavailable variants?

Store Design
, ,
1

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

1 Like
2

Hey @vancouver_k

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

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

1 Like
4

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 tag

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

Best Regards,
Moeed

1 Like
5

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-to-all-my/td-p/2995642

thank you

6

Hi there,

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

Screen Shot 2025-03-31 at 08.19.50.png
Screen Shot 2025-03-31 at 08.19.50.png1134×896 39.4 KB

Screen Shot 2025-03-31 at 08.17.54.png
Screen Shot 2025-03-31 at 08.17.54.png1820×1296 378 KB

7

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:

EasifyJolie_5-1743406958856.png
EasifyJolie_5-1743406958856.png1089×624 263 KB

EasifyJolie_4-1743406940063.png
EasifyJolie_4-1743406940063.png1091×615 265 KB

  • This is the app setting:

EasifyJolie_3-1743406909058.png
EasifyJolie_3-1743406909058.png1334×567 46.2 KB

EasifyJolie_7-1743407047526.png
EasifyJolie_7-1743407047526.png1323×555 67.5 KB

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:

EasifyJolie_6-1743407025410.png
EasifyJolie_6-1743407025410.png1337×570 62.9 KB

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.

EasifyJolie_8-1743407212034.png
EasifyJolie_8-1743407212034.png1006×155 7.63 KB

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! :hugs:

8

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

1 Like
9

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

Best Regards,

Moeed

10

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

11

I’m also looking for this solution. Did you find something?

12

I hired someone from upwork who fixed it for me for about £50. Happy to share their profile if you’d like. Nothing I tried worked.