I am looking to modify the Feather theme so that instead of showing ALL size options for ALL colors no matter what color is selected, it only shows the sizes for the selected color. Can anybody point me in the right direction? any help would be appreciated.
Topic summary
A user sought to modify the Feather theme to display only size options available for the currently selected color, rather than showing all sizes for all colors regardless of selection.
Resolution:
- The issue was resolved by adding a CSS rule to
base.css:.js.product-form__input.product-form__input--pill input.disabled + label { display: none; } - This hides disabled size options dynamically based on color selection.
Alternative Solution:
- A community member suggested using the Easify Product Options app with conditional logic as a no-code alternative.
- The app allows setting up rules to show specific size options only when corresponding colors are selected.
- Includes visual examples showing the conditional logic configuration in the app settings.
nevermind, my programmer and design guys put their heads together and added
.js.product-form__input.product-form__input–pill input.disabled + label { display: none; }
in base.css
Hi @BillRebane
It looks like you’re trying to show only the relevant size options based on the selected color—I recommend using Easify Product Options with conditional logic to display size choices dynamically. It’s simple to set up and requires no coding.
- This is the result:
- This is the app setting:
To make sure Size for Black only show up when customers choose Black as Shirt Color, simply set Conditional Logic in the Advanced Settings like this:
Easify is simple to set up, and I hope you check it out. Let me know if you need any support! 