Shopify themes, liquid, logos, and UX
Hi,
I'm working on a website that shows which sizes are out of stock when a specific color is selected, but it doesn't work in reverse – selecting a size doesn’t indicate which colors are out of stock.
For example, on this product - https://theothelabel.com/products/pallas-dolman-high-rib-turtleneck?variant=49293117423904
If I click the nutshell color, the M size has a stroke through it. Is there a way to also reverse that so if I pick the M size, the nutshell color has a stroke through it as well?
Hi @JoeyRoo
It seems that the rule is working correctly. Since your default color is set to Black, when you select size M, and the color Black is still available, the letter M is not crossed out. As for the color, the original rule is not to cross out the color, so that's why you don't see the color crossed out when you select the size.
When you select both the Nutshell color and size M, you'll see 'Sold out' and a strikethrough on size M. Therefore, everything is still working correctly, so please rest assured.
You do not need to worry about it.
Hope it helps!
Best,
Daisy
Hi @JoeyRoo
May I ask what theme you are using, please?
Best,
Daisy
This depends on your theme.
Some approach this as a funnel or a faceted filter -- you select first option, theme updates the list of choices for second option, then you select second options and theme further updates available choices for the 3rd option based on selections made for option 1 and 2.
You can control order of product options and it will change the decision tree for your visitors.
Other themes approach it differently -- you make selection in any option and theme updates other selectors to what's available based on what you've just selected. This does not help much if more than 2 options.
Is it possible to change this functionality for your theme -- yes, but unless the theme offers both ways for you to select in customizer, it's a non-trivial modification of theme Javascript.
Ahh I see what you are saying. I fixed the issue. The problem is that the Size was listed first then the Color, when I needed to switch them around so it crossed out correctly.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025