Shopify Studio Theme: How to Hide Unavailable Product Variants for a Cleaner UX

Hey fellow store owners!

As a Shopify migration expert and someone who spends a lot of time sifting through community discussions, I often see common pain points surface again and again. One topic that recently caught my eye, and frankly, got a lot of traction, was about cleaning up product variant options, specifically for those of you running the Studio theme.

The original question came from a store owner named BigQuince, who, like many others, was frustrated with how the Studio theme handles unavailable product variant combinations in dropdown menus. Instead of just hiding them, the theme defaults to showing options like "3XL - unavailable."

BigQuince rightly pointed out that this isn't the best customer experience. Why show something if it's not truly an option? It can lead to confusion, extra clicks, and a less streamlined shopping journey. And honestly, who wants their customers seeing a bunch of "unavailable" options?

The Problem: Cluttered Variant Pickers

Joshua827 echoed this sentiment, confirming that "studio still shows the unavailable ones in the dropdown for me too." It's a pretty common scenario: you have a product, say a T-shirt, that comes in various colors and sizes. But not every color is available in every size. By default, your Studio theme's dropdowns would list all sizes for a chosen color, even if that specific size isn't made for that color, just marking it as unavailable.

This isn't just an aesthetic issue; it's a usability one. You want your customers to easily find what they can buy, not be presented with what they can't.

Why Simple CSS Isn't the Answer

Before we dive into the solution, it's crucial to understand why a quick CSS fix isn't ideal here. As Zyblue wisely stated, "I wouldn’t hide these with CSS alone. The safer fix is making the variant picker rebuild its available options based on the current selection."

itspaulnicoleson elaborated on this, emphasizing the need for the variant picker to be "option-aware." Simply hiding an option with CSS means the underlying dropdown still contains that value, which can lead to broken selections or confusion if a customer somehow manages to select it. The goal is to make the dropdown dynamically update, so if a customer picks "Green," the size dropdown only shows sizes actually available for green.

This means we're looking at a solution that involves a bit of custom code, primarily Liquid and JavaScript, to make that variant picker smart!

The Community-Approved Solution: Custom Theme Code

Several experts in the thread, including devcoders, Priyasha, and Mustafa_Ali, all agreed: this isn't a native setting you can just toggle. You'll need to get into your theme's code. But don't worry, the community provided a fantastic, detailed walkthrough.

The core idea is to modify your theme's Liquid files to prevent unavailable options from even rendering, and then add a bit of JavaScript to ensure the variant picker intelligently adjusts when a customer changes their selection.

Important Pre-Flight Checklist: Duplicate Your Theme!

Before you touch any code, please, please, please: duplicate your theme! BigQuince thanked a community member for this tip, and it's truly essential. This creates a safe backup, allowing you to test changes without affecting your live store. If anything goes wrong, you can always revert to your duplicated theme. Remember that theme updates will also overwrite these customizations, so you'll need to re-apply them after an update.

Here’s how to do it:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your Studio theme, click the … (three dots) button, and select Duplicate.

Now, let's dive into the code, thanks to the incredibly detailed steps provided by Ploqo!

Step-by-Step Instructions to Hide Unavailable Variants (Studio Theme)

These instructions are for Studio theme version 15.5.0, but the general approach should be similar for other versions. Always test on a duplicate theme first!

1. Open the Code Editor

In your Shopify Admin:

• Go to Online Store > Themes.
• On your duplicated Studio theme, click the … (three dots) button and select Edit code.

2. Edit snippets/product-variant-options.liquid (Top Section)

Find the file snippets/product-variant-options.liquid. Near the top, locate this code:

{%- liquid
  assign product_form_id = 'product-form-' | append: section.id
-%}

Replace it with this:

{%- 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. Same File, Find the Dropdown Block

In the same file, snippets/product-variant-options.liquid, scroll down and find this section (it's part of a larger if/elsif statement):

  {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
    

Replace it with this, 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

Now, open the file snippets/product-variant-picker.liquid. Paste the following JavaScript code straight after , above the last line {%- endunless -%}, then Save:

This JavaScript is super important! It ensures that if a customer selects a variant (like a color) that makes the previously selected subsequent variant (like a size) invalid, the size dropdown will automatically snap to a valid option for the newly selected color. Without it, you could still end up with an invalid combination selected, even if it's no longer displayed.

A Few Extra Notes from the Community

• Sold Out vs. Unavailable: Ploqo also clarified that the default code change ({%- unless value.available or value.variant.id -%}) hides variant combinations that simply don't exist. If you want to also hide sizes that exist but are currently sold out (e.g., "M - Unavailable"), you'd change that line to {%- unless value.available -%}. This gives you control over what "unavailable" truly means to your customers.

  

• Dropdowns Only: This solution specifically targets dropdown pickers. Button and swatch pickers won't be affected by these code changes.
• Consider a Developer: If diving into code feels intimidating, Priyasha and Mustafa_Ali both suggested reaching out to a Shopify Partner or checking the Shopify Experts marketplace. This is a common request, and a developer can implement it quickly and safely for you.

By implementing these changes, your Studio theme will transform from showing confusing "unavailable" options to dynamically displaying only the truly available variant combinations. This makes for a much cleaner, more intuitive product page experience for your customers, ultimately leading to happier shoppers and potentially better conversion rates. It's a fantastic example of how a little custom code, informed by a vibrant community, can make a big difference!