How to Hide Sold Out Variants in Shopify (4 Methods, 2026)

To hide sold-out variants in Shopify, you have four options: edit variants manually in the admin, modify your theme's Liquid code, grey them out with CSS, or use an app that unpublishes them from your sales channels automatically. Manual edits don't scale, code edits break on theme updates and don't touch search or filters, and CSS only changes how unavailable options look. An app working at the channel level is the only method that's automatic, restock-safe, and covers every storefront surface.

That's the short answer. The rest of this guide walks through each method properly — with copy-paste code for the do-it-yourself routes — so you can pick what fits your store:

1. Manually, in the Shopify admin
2. Editing your theme's Liquid code (with code)
3. Greying out with CSS (with code)
4. Automatically, with an app

We build VarHide, so method 4 is ours — but the trade-offs of each approach are laid out honestly so this stays useful even if you never install anything.

Why hide sold-out variants at all?

Because every unavailable option a shopper taps is friction, and friction costs conversions. Shopify doesn't hide sold-out variants by default — most themes grey them out or label them "Unavailable", but they stay on the page, in storefront search, and in collection filters. Hiding them shows shoppers only what they can actually buy.

• Fewer dead ends. Showing only buyable options shortens the path to add-to-cart, especially on mobile.
• Cleaner product pages. A picker with 4 live options reads better than one with 12 options where 8 are struck through.
• Accurate search & filters. Sold-out variants can still surface in storefront search and collection filtering, routing shoppers to products that can't serve them.
• Fewer support tickets. "Is the medium really out of stock?" emails drop when the medium simply isn't shown.

Method 1: Can you hide variants manually in the Shopify admin?

Yes, but only destructively: the admin has no "hide variant" button, so hiding manually means deleting the variant or removing its option value. That works for a store with a handful of variants and rare stockouts, and it costs nothing. It also throws away real data every time you do it.

How to do it

1. In Shopify admin, go to Products and open the product.
2. Under Variants, open the sold-out variant.
3. Either delete the variant, or remove its option value from the product's options.
4. When stock returns, recreate the variant with its price, SKU, barcode, and inventory settings.

The trade-offs

• It's destructive. Deleting a variant discards its SKU, barcode, price overrides, and its identity in analytics and integrations. We wrote a full guide on hiding variants without deleting them because this bites so many merchants.
• It doesn't scale. Ten variants a week is annoying; a hundred is a part-time job.
• Restocks get missed. Nothing reminds you to recreate a variant, so restocked items quietly stay invisible — the worst possible outcome.

Method 2: How do you hide sold-out variants with Liquid theme code?

You edit your theme's variant-picker snippet so option values with no available variants are never rendered. This is free, non-destructive, and gives a clean result on the product page — but it requires code comfort, survives neither theme updates nor theme switches, and does nothing for storefront search, collection filters, or other sales channels.

How to do it

1. Duplicate your theme first (Online Store → Themes → ⋯ → Duplicate). Always work on the copy.
2. Open Edit code and find the variant picker — commonly a snippet like product-variant-picker.liquid, variant-picker.liquid, or markup inside main-product.liquid, depending on the theme.
3. Wrap the option-value output in an availability check. The core pattern below works in any theme; adapt the markup inside the loop to match what your theme renders.

For a single-option product (e.g. sizes only), filtering the variant loop is enough:

{% comment %} Render only available variants in the picker {% endcomment %}
{% for variant in product.variants %}
  {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }}</option>
  {% endif %}
{% endfor %}

For multi-option products (size × colour), you must only hide an option value once every variant carrying it is sold out — "Medium" stays visible while Medium/Black is in stock even if Medium/Red is gone:

{% comment %} Hide an option value only when ALL its variants are unavailable {% endcomment %}
{% assign option_index = forloop.index0 %}
{% for value in option.values %}
  {% assign value_available = false %}
  {% for variant in product.variants %}
    {% if variant.options[option_index] == value and variant.available %}
      {% assign value_available = true %}
      {% break %}
    {% endif %}
  {% endfor %}

  {% if value_available %}
    {% comment %} ...your theme's existing markup for this option value... {% endcomment %}
  {% endif %}
{% endfor %}

The trade-offs

• Theme updates undo it. Update or switch your theme and the customisation must be re-applied by hand, every time.
• It only fixes one surface. The variant still exists on every channel — storefront search, collection filters, B2B catalogues, and marketplaces all still see it. Liquid controls rendering, not publication.
• Multi-option logic is easy to get wrong. The naive version hides "Medium" the moment one Medium combination sells out. Test both single- and multi-option products before going live.

Method 3: Can CSS grey out sold-out variants instead?

Yes — if what you want is unavailable options that are visible but clearly dead, CSS is the lightest tool for the job. Most themes already add a disabled state or class to unavailable options; CSS lets you strengthen it (dim, strike through, block clicks). What CSS cannot do is actually hide anything from search, filters, or other channels — it's presentation only.

How to do it

1. In Online Store → Themes → Customize → App embeds / custom CSS (or your theme's base.css / custom CSS section), add rules targeting your theme's disabled-option state.
2. Find the right selector with your browser's inspector — class names vary by theme (Dawn marks unavailable option inputs as .disabled; other themes use [disabled] or their own classes).

/* Grey out unavailable variant options — adjust selectors to your theme */
variant-selects input[type="radio"].disabled + label,
variant-selects input[type="radio"]:disabled + label,
.product-form__input input.disabled + label {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none;   /* remove this line to keep them clickable */
}

The trade-offs

• It's cosmetic only. The variant remains fully present on every surface; you've changed pixels, not availability.
• Selectors are theme-specific. A theme update that renames a class silently breaks the styling.
• Greying out may be the wrong goal. Whether to grey out or fully hide is a real conversion question that depends on your catalogue — we compared the two head-to-head in Hide vs. Grey Out Sold-Out Variants.

Method 4: How does an app hide sold-out variants automatically?

An app like VarHide works at a different layer: instead of you editing how your theme displays variants, it changes which variants are published to your sales channels, using Shopify's own publishing system — and a one-toggle app embed handles the storefront picker. Hidden variants vanish from product pages, storefront search, and collection filters together. You never write or maintain code: the embed is a switch in the theme editor, so there's nothing to re-apply after theme updates (switch themes, and you just flip the toggle on again).

How to set it up (about 5 minutes)

1. Install VarHide from the Shopify App Store (free plan available).
2. Enable the VarHide app embed for your Online Store (Customize → App embeds — the app links you straight to it).
3. Choose which sales channels it should manage — and, on higher plans, B2B catalogues and Shopify Markets regions.
4. Pick your definition of "sold out": the default available-for-sale check, only locations that fulfil online orders, specific locations, or a custom threshold (e.g. treat ≤ 2 units as sold out).
5. Optionally add rules with the query builder — scope by product tag, vendor, type, status, title, SKU, price, even metafields.
6. Enable automatic updates, and you're done.

What automation gets you

• Real-time, both directions. Inventory webhooks drive the updates: variants hide when they sell out and republish when stock returns, typically within a couple of minutes — restocks can't be forgotten.
• Sensible defaults. Variants set to "continue selling when out of stock" are left alone by default, as are variants whose inventory isn't tracked.
• No 404s. If every variant of a product sells out, VarHide keeps the product visible rather than leaving it with zero published variants — so the product page stays live for SEO and existing links (single-variant products included). Prefer to hide the whole product in that case? Pair it with Blink.
• Respects your manual work. An optional "only republish what the app hid" mode means variants you unpublished yourself stay unpublished.
• Reversible. VarHide records each variant's original publication state before touching it, and a one-click restore puts everything back the way it was.

The trade-off: full automation is a paid feature (from $4.99/month; the free plan is manual).

Which method should you choose?

Pick by how often you sell out and how many surfaces you sell on. Rare stockouts on a tiny catalogue → manual is fine. A developer on hand and one storefront → Liquid works, with maintenance. Want unavailable options visible but obviously dead → CSS. Frequent stockouts, big variant matrices, or multiple channels → automation is the only method that keeps up.

Does hiding sold-out variants hurt SEO?

Generally no — variants share their product's URL, so hiding a sold-out size doesn't remove a page from Google's index. The product page and its ranking stay intact. This is where variants differ fundamentally from products.

The real SEO risk sits at the product level: if a tool leaves a product with zero visible variants — or unpublishes it entirely — the URL can start returning 404, and accumulated rankings and backlinks suffer. That's why VarHide's default is to keep a product visible even when everything in it is sold out, and why whole-product hiding (with options like staying reachable by direct URL) is a deliberate, separate decision.

FAQ

What happens when a hidden variant is restocked?

With automation enabled, VarHide republishes it to your configured channels automatically, usually within a couple of minutes of the inventory change. Methods 1–3 rely on you remembering to reverse the edit.

Can I hide variants before they fully sell out — say, at 2 units left?

Yes. VarHide's sold-out definition supports a custom inventory threshold, so you can treat "2 or fewer units" as sold out — useful when the last units are safety stock or often unsellable.

What about variants set to "continue selling when out of stock"?

Those are backorderable on purpose, so VarHide leaves them visible by default. You can change that behaviour in settings.

Does this work with Shopify Markets and B2B?

Yes — because VarHide works through Shopify's publishing system, it can manage visibility per sales channel, per B2B company catalogue (Business plan), and per Markets region catalogue (Enterprise plan) independently.

Do I need to touch my theme at all?

You never edit theme code. For the Online Store you enable the VarHide app embed — a one-click toggle in the theme editor — and everything else (search, filters, other channels) is handled server-side. No Liquid edits, nothing to re-apply after theme updates.

Keep reading

• How to Hide Out-of-Stock Variants Without Deleting Them — why deletion costs more than it looks, and the non-destructive alternative.
• Hide vs. Grey Out Sold-Out Variants: Which Converts Better? — a decision framework, hybrid strategies, and how to measure it.

← Back to the VarHide blog