Clean Up Your Product Pages: Hiding Unavailable Variants in Shopify's Studio Theme Dropdowns
Hey store owners!
Ever found yourself clicking through product options on a website, only to be met with a frustrating "- unavailable" tag? It's a common friction point in online shopping, and it's something many of us want to smooth out for our customers. Recently, a fantastic discussion popped up in the Shopify community about this very issue, specifically for those using the Studio theme. BigQuince kicked it off, asking if there was a way to completely hide unavailable variant combinations instead of just showing them greyed out or with that "unavailable" label.
And let me tell you, the community delivered! It was a great example of how store owners and developers come together to solve real-world problems. Let's dive into what we learned and how you can implement a cleaner experience on your own Studio theme store.
Why Hiding Unavailable Variants Matters (and Why CSS Alone Won't Cut It)
The core problem BigQuince highlighted is something many of us face: if a Green T-shirt simply doesn't exist in 3XL, why even show "3XL - unavailable"? It clutters the interface, can lead to confusion, and frankly, it's just not the slickest user experience. As several experts like Zyblue and itspaulnicoleson pointed out, simply hiding these options with CSS is a no-go. Why? Because the underlying dropdown would still contain those invalid choices, and a customer could still theoretically 'select' them, leading to broken product forms or a very confusing checkout process.
The consensus was clear: the safer, better fix is to make your variant picker truly option-aware. This means the dropdowns should dynamically rebuild themselves based on the customer's current selection. So, if someone picks "Green," the Size dropdown should only show sizes that are actually available for green T-shirts, completely removing 3XL if it doesn't exist for that color.
The Community's Take: It's a Code Job (Mostly)
Priyasha and Mustafa_Ali both confirmed that hiding unavailable combinations isn't a native, built-in setting in Shopify 2.0 themes like Studio. By default, Shopify themes are designed to show all non-existent combinations as "Unavailable." So, if you want this cleaner look, you're going to need to roll up your sleeves and get into the theme code, or consider hiring a Shopify Partner if you're not comfortable with it. But don't worry, the community provided some excellent, detailed steps!
The Go-To Solution: Custom Code for Studio Theme (Thanks, Ploqo!)
The most comprehensive and actionable solution came from Ploqo, who provided a step-by-step guide for Studio theme version 15.5.0. This involves modifying a couple of Liquid snippet files and adding a bit of JavaScript. It's a fantastic way to ensure your dropdowns only show valid combinations.
Before You Start: Duplicate Your Theme!
This is crucial! Before making any code changes, always, always, duplicate your theme. Go to your Shopify admin: Online Store > Themes, find your Studio theme, click the ... actions button, and select Duplicate. Work on the duplicate copy. This way, if anything goes wrong, your live store remains untouched, and you can easily revert. Remember, theme updates will also replace these files, so you'll need to re-apply these changes after an update.
Step-by-Step Instructions to Hide Unavailable Variants in Studio Theme Dropdowns:
1. Open the code editor
From your Shopify admin, navigate to: Online Store > Themes > Studio > ... > Edit code.
2. Edit snippets/product-variant-options.liquid
Locate this file in the `snippets` directory. Near the top, find this code block:
{%- liquid
assign product_form_id = 'product-form-' | append: section.id
-%}
Replace it with this updated code:
{%- liquid
assign product_form_id = 'product-form-' | append: section.id
assign keep_selected = false
for v in option.values
if v.selected
if v.available or v.variant.id
assign keep_selected = true
endif
endif
endfor
assign forced_selected = false
-%}
3. In the same file (snippets/product-variant-options.liquid), find the dropdown block
Scroll down until you find this section:
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
Replace it with this code, then Save:
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
{%- unless value.available or value.variant.id -%}
{%- continue -%}
{%- endunless -%}
{%- liquid
assign is_selected = value.selected
unless keep_selected
unless forced_selected
assign is_selected = true
assign forced_selected = true
endunless
endunless
-%}
4. Edit snippets/product-variant-picker.liquid
Open this file. Paste the following script straight after , above the last line {%- endunless -%}, then Save:
Important Considerations from the Community:
- Don't skip Step 4! The JavaScript in
product-variant-picker.liquidis vital. It handles scenarios where a shopper on a valid combination (like "Blue / 3XL") switches to a different color (like "Green") that doesn't have 3XL. The script will automatically snap the size back to one that is available for Green, preventing a broken selection. - Sold Out vs. Unavailable Combinations: The provided code hides options that don't have a valid variant ID (i.e., combinations that simply don't exist). If you also want to hide sizes that *do* exist but are currently sold out (e.g., "M - Unavailable"), you can change
{%- unless value.available or value.variant.id -%}to{%- unless value.available -%}in Step 3. - Dropdowns Only: This solution specifically targets dropdown pickers. Button and swatch pickers will remain untouched.
- Theme Updates: As mentioned, updating your Studio theme will replace these files, so you'll need to re-apply these changes after each theme update. Keep a backup of your modified code snippets!
Here's a visual of how much cleaner your dropdowns can look after these changes:
And if you choose to keep sold-out items visible, they'll still show:
Beyond the Code: Other Approaches & When to Call for Help
While Ploqo's detailed steps are a fantastic starting point for Studio theme users, it's worth noting other methods mentioned by the community:
- JS-based Cleanup: Mustafa_Ali suggested adding a small script via a Custom Liquid section. This script would run after the variant picker loads and remove/hide any options marked unavailable. It's a way to avoid editing core theme files directly, though it still requires some comfort with JavaScript.
- App Route: For those who prefer not to touch code at all, apps like "Hide Sold Variants" might offer a solution, though results can vary depending on your theme's structure.
- Hire an Expert: If diving into code feels too daunting, or if you need a more customized solution, reaching out to a Shopify Partner or developer is always a smart move. This is a common request, and many developers can implement it quickly and safely for your specific Studio theme version.
Ultimately, a clean, intuitive product page is key to a great shopping experience. Removing those confusing "- unavailable" options makes your store look more professional and helps customers find what they want faster, reducing friction and potentially boosting conversions. It's a small change with a big impact, and thanks to the collaborative spirit of the Shopify community, we've got a solid path forward!