Shopify variant conditional logic: show or hide options based on selections
Picture a store that sells phone cases. The first option is “Phone Model” (iPhone 15, iPhone 16, Galaxy S24). The second option is “Case Type” (Slim, Rugged, Wallet). But the Wallet case only exists for iPhone models. Shopify shows all three case types for every phone model anyway. The customer picks Galaxy S24, selects Wallet, and gets a “sold out” message. Bad experience.
This is the conditional logic problem. Shopify doesn’t have built-in conditional logic functionality for variant options which means you can’t display or hide option values based on previous selections. As a result, all option values are always visible, even when certain combinations don’t exist leading to dead-end selections that infuriate customers and inflate “sold out” clicks.
This guide teaches you how to build conditional variants on Shopify by dynamically hiding and displaying options, and by handling edge cases where your product grid is not square.
In this post
- What is conditional variant logic?
- Why Shopify does not have this built in
- Method 1: JavaScript option filtering
- Method 2: Disable instead of hide
- Method 3: Separate products with Combined Listings
- UX patterns for conditional options
- FAQ
What is conditional variant logic?
Conditional variant logic means the available choices for one option depend on what was selected in another option. Common examples
- Color depends on Material: A sofa in “Leather” comes in Brown, Black, Tan. The same sofa in “Fabric” comes in Grey, Blue, Beige, Green. Selecting Leather should only show the leather colors.
- Size depends on Color: A t-shirt in “White” is available S through XXL. The same shirt in “Limited Edition Gold” only comes in M and L.
- Accessory depends on Model: Phone cases, laptop sleeves, or car parts where compatibility varies between models.
Without conditional logic, all options show for all combinations. The customer sees 6 colors when only 3 are valid for their selected material. They click an invalid combination and hit a wall.
Why Shopify does not have this built in
Shopify’s variant system is a flat matrix. For 3 Colors and 4 Sizes, it would generate 12 variants (3 x 4), regardless of whether certain combinations are actually invalid. You can mark those as out of stock or remove them entirely, but the option picker will still allow customers to select them.
Why a flat, two dimensional matrix and not an n dimension one? A flat matrix is simple, it is predictable, it is fast. In contrast, the conditional logic required to handle a customer selecting Color first versus Size first first, or where three options are interdependent, is very complex and the number of permutations is huge.
Shopify does not handle this conditionally, leaving it up to themes and apps to handle. Most themes do not handle this condition, leaving many to resort to custom code or condition specific apps.
Method 1: JavaScript option filtering
The most common method of dealing with this issue is to use JavaScript to check for the variants that actually do exist on the store and then hide any option values which do not have a variant that exists. Using this method, when the customer selects “Leather” for the option labeled “Material”, the script would check which of the “Color” option values have at least one variant where the value for the option with the label “Material” is “Leather”, and then hide any “Color” option values that do not.
Here is the core logic:
// Build a map of available combinations from the product's variant data
const variants = {{ product.variants | json }};
function getAvailableValues(optionIndex, selectedOptions) {
return variants
.filter(v => {
// Check if this variant matches all previously selected options
return selectedOptions.every((val, i) => {
if (i === optionIndex) return true; // skip current option
if (val === null) return true; // skip unselected options
return v.options[i] === val;
});
})
.filter(v => v.available) // only in-stock variants
.map(v => v.options[optionIndex]);
}
// When an option changes, update the next option's visible values
function updateVisibleOptions(changedIndex) {
const selected = getCurrentSelections(); // array of selected values
for (let i = changedIndex + 1; i < optionCount; i++) {
const available = new Set(getAvailableValues(i, selected));
const buttons = getOptionButtons(i);
buttons.forEach(btn => {
const value = btn.dataset.value;
if (available.has(value)) {
btn.style.display = '';
btn.disabled = false;
} else {
btn.style.display = 'none'; // or btn.disabled = true;
}
});
}
}This is a simplified version. A production implementation needs to handle edge cases: what happens when the currently selected value in option 2 becomes unavailable after option 1 changes? You need to either auto-select the first available value or clear the selection and prompt the customer to choose again.
This JavaScript solution is theme-agnostic because it relies on the variant information already provided in Shopify. It requires custom coding and testing, however, especially to ensure that it works with all of your product variations.
Method 2: Disable instead of hide
Instead of simply hiding the option (which can look very bad if the user knows it exists for other options), one could display the option but make it disabled (preferably with a slight tint, so it is visibly disabled). This would allow the customer to know that “XXL” exists for the product, which could make them actually choose a different color to be able to get that size. In the example to the right, “XXL” is disabled for the “Limited Edition Gold” color, and shown in a greyed out state.
// Instead of hiding, disable and style
buttons.forEach(btn => {
const value = btn.dataset.value;
if (available.has(value)) {
btn.classList.remove('is-unavailable');
btn.disabled = false;
} else {
btn.classList.add('is-unavailable');
btn.disabled = true;
}
});/* Unavailable option styling */
.variant-input__label.is-unavailable {
opacity: 0.3;
cursor: not-allowed;
text-decoration: line-through;
pointer-events: none;
}Hiding or disabling? Depending on how your customers shop with you, it may be better to hide certain colors with invalid sizes instead of disabling them. Or perhaps it is better to disable them in order to give customers a full range of sizes even after they have begun to select by color? Most conversion focused research suggests that disabling is better than hiding because it is less surprising to the customer (“where did the XXL go?”).
For the color swatches, just setting them to a strikethrough or a lower opacity is enough for the user to know that that color is available, but not in that size. Rubik Variant Images allows you to control how to display sold-out variant swatches (greyed out, crossed out, hidden etc.).
Method 3: Separate products with Combined Listings
Instead of throwing layers of nested conditional logic at a problem (and often arriving at a mess), it’s better to stick with a simple policy of not using conditionals at all. That is, rather than encoding two different but complementary variants into a single product, organize the products in a logical order and group them together with a nifty widget or interface element, such as a tab control or accordion.
Create separate products for valid combinations: instead of one product “Sofa” with Material, Color and Size options, create three products: “Leather Sofa”, “Fabric Sofa” and “Velvet Sofa”. And for each of the products that have options of colors and sizes only relevant to that product, you will only need to define options for these two characteristics. In this case there is no need to generate variants with invalid combinations of Material, Color and Size options. No conditional logic required.
Rubik Combined Listings allows you to list multiple Rubik Products together with swatches on the product and collection pages. Material swatches will link to the individual product and on the product pages you will see only the colors and sizes that exist for that material – no dead-end combinations.
This approach has additional benefits:
- SEO: Each product gets its own URL, title, and description. “Leather Sofa Brown” ranks separately from “Fabric Sofa Grey”.
- Variant limit: Each product stays well under Shopify’s 100-variant limit instead of one mega-product hitting the ceiling.
- Inventory: Each product has clean, simple inventory tracking without phantom zero-stock variants cluttering your reports.
- Images: Each product has its own image gallery. No need for variant image filtering because the gallery only contains relevant images.
UX patterns for conditional options
If you choose Method 1 or Method 2, the details count. Some lessons learned about user experience patterns that worked for us:
- Option order matters. Put the most differentiating option first. If Material determines which Colors are available, Material should be the first option. Customers select top to bottom, and each selection narrows the next.
- Show a count. “Color (3 available)” next to the option header tells the customer that the selection is filtered. Without this, they might think you only sell 3 colors.
- Reset gracefully. If the customer changes option 1 and their option 2 selection becomes invalid, auto-select the first available value for option 2 and briefly highlight the change. Do not silently switch without feedback.
- Mobile touch targets. When options are hidden or disabled, the remaining options should expand to fill the space. Five swatches in a row with two hidden and three visible should not leave two empty gaps.
- Communicate “not unavailable, just not with this combo.” A tooltip on disabled options like “Not available in Leather” is better than just greying it out. The customer understands it exists, just not in their current configuration.
“Hands Down the best customer support of all the variation/swatch apps I have used till date. The app does everything. From individual variant gallery to really detailed customizable swatch’s. All in a single app. Originally we used to use two different apps so this is so much more cost efficient for us.”
Bellissima Covers, India, Rubik Variant Images on the Shopify App Store
See the live demo store, watch the setup tutorial, or read the getting started guide.
Frequently asked questions
Does Shopify support conditional logic for variant options natively?
Shopify don’t natively support a variant option with conditional values (i.e. option values change based on previous option selection). Their variant system is a flat matrix that shows all option values for all combinations of all options. To create this type of variant structure you would require custom implementation via JavaScript or a third party app (such as Store-Yo), or a workaround involving your product structure (e.g. creating separate products using Combined Listings).
Should I hide unavailable options or grey them out?
Disabling (greying out) is better than hiding. Showing the customer that an option exists but is not available for their current selection is better than making them think you don’t offer that size or color at all.
Will conditional logic work with color swatches?
Yes, this script can work with any of the variant picker types (swatches, dropdowns, buttons). The JavaScript code specifically targets the options or option elements, regardless of whether your variant picker is displayed as swatches, dropdowns, or buttons. An app like Rubik Variant Images allows you to customize how sold-out variant swatches look, e.g. as greyed out, invisible, or crossed out.
Is it better to use separate products instead of conditional logic?
For products with many incompatible combinations (like Material determining which Colors exist) it is often better to create separate products grouped with Rubik Combined Listings This keeps only valid variants in the listing, gives each product its own SEO page and keeps you under the variant limit. This is also very helpful for products where most but not all combinations are valid with minor gaps, and it’s simpler to add conditional logic for those missing combinations.
How does conditional logic affect the Add to Cart button?
If a customer has not yet selected all of the required options (even if some of those options were hidden or left to default) then the Add to Cart button should be disabled with a message such as “Select all options”. Make sure that your JavaScript code updates the status of the Add to Cart button whenever an option is changed. The customer should not be allowed to add an incomplete or invalid combination to the cart.
Does this work with Shopify’s 100 variant limit?
Conditional Logic doesn’t increase the limit of 100 variants (2000 with Combined Listings). It makes the existing variants more usable by hiding out the variants that don’t exist. However for products that hit the 100 variant limit, separate products would allow you to go above that 100 variant limit, since each product has its own 100 variant allowance.
