A merchant using the Craft theme wants to hide unavailable product variants (frame sizes) from dropdown menus, rather than showing them crossed out. Currently, when customers select a frame type, they see a long list of sizes with many marked as unavailable, creating confusion.
Initial Code Solution Attempted:
</body> tagAlternative Solutions Suggested:
Final Outcome:
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
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
Hey @vancouver_k
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
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
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:
thank you
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:
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! 
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
Can you share your collaborator code in my private messages so that I can have a proper look at it?
Best Regards,
Moeed
I’m having the same issue, tried a couple of bits of code but doesn’t work, perhaps they are for previous template versions.
I’m also looking for this solution. Did you find something?
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.
Third-party apps make it easy to separate variants. I own the Stamp – Collection Variants app , and we help merchants display variants separately on the collection page and home page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.
Hello @vancouver_k
I hope you are doing well. Since you want to display relevant frame sizes based on the selected frame type, you can try Inkybay – Product Personalizer app.
Using Inkybay’s product option feature, you can create options like image swatches, text fields, file uploads, etc., and show them as dropdowns, radio buttons, or checkboxes.
For your product, first, you need to create frame type options. Then create the relevant frame size options as a child of each frame type. This way, when a customer selects a frame type, they will only see the sizes available for that type. No space for crossed-out sizes because you will be able to add sizes as per your preference.
No coding is needed, and setup is simple. You can try Inkybay’s free 21-day trial to explore this feature and see it in action. If you like, we can also share a demo product with you.
Here is the result when the first frame type is selected:
When the Second frame type is selected, the available size for the First frame type is hidden, and only the available size for the selected frame type is shown.
