How to Hide Sold Out Variants in Shopify's Dawn Theme (2026)

You're on Dawn, a size sold out, and it's still sitting in the variant picker — greyed out, crossed out, still clickable enough to disappoint people. You've searched the theme settings twice. There's no toggle.

You're not missing anything: Dawn has no built-in option to hide sold-out variants. Merchants have been asking for one on the Dawn repo since 2021 (issue #459), and the community threads keep filling up. Here's what Dawn actually does, the manual fix, and the faster path.

What Dawn does with sold-out variants

Dawn renders each product option (Size, Colour) as a row of pills or a dropdown. Two things make it trickier than other themes:

• Pills are option values, not variants. The "Medium" pill represents every variant containing Medium. It's only safe to hide when all of those combinations are sold out.
• The picker re-renders itself. Every time a shopper changes an option, Dawn fetches fresh picker markup from the server (the Section Rendering API) and replaces the DOM. Any JavaScript that hides pills after page load gets wiped on the very first click — which is why so many copy-pasted snippets from forums "work until you select something".

Under the hood (in snippets/product-variant-options.liquid, which the picker renders for every option value), Dawn checks the value's value.available property and, when it's unavailable, adds class="disabled" to the radio input plus a visually-hidden label for screen readers:

<!-- What Dawn renders for an unavailable option value (button picker) -->
<input type="radio" id="..." name="..." value="Medium" class="disabled" ...>
<label for="...">
  Medium
  <span class="visually-hidden label-unavailable">
    Variant sold out or unavailable
  </span>
</label>

The quick fix: hide them with CSS

Because Dawn has already tagged unavailable options with the disabled class, one CSS rule hides them — and unlike JavaScript, CSS survives the picker's re-renders, since the fresh markup carries the same classes. Add this under Customize → Theme settings → Custom CSS:

/* Hide (instead of grey out) unavailable variant options in Dawn's button picker */
.product-form__input input[type="radio"].disabled,
.product-form__input input[type="radio"].disabled + label {
  display: none !important;
}

Catches: it targets the button (pill) picker — dropdowns need their own selectors; availability is computed relative to the shopper's current selection; and it's still cosmetic — search, filters, and other channels aren't affected. Class names can also shift between Dawn releases, so re-check after major updates.

The manual fix: edit the variant-picker Liquid

Because the picker is server-rendered, the reliable manual fix is in Liquid, not JavaScript — skip rendering an option value when no available variant carries it:

{%- comment -%} Inside the loop that renders each option value {%- endcomment -%}
{%- assign value_available = false -%}
{%- for variant in product.variants -%}
  {%- if variant.available and variant.options contains value -%}
    {%- assign value_available = true -%}
  {%- endif -%}
{%- endfor -%}
{%- if value_available -%}
  {%- comment -%} render the pill / option as usual {%- endcomment -%}
{%- endif -%}

1. Duplicate your theme first. Always.
2. In Online Store → Themes → Edit code, open the option-rendering snippet — snippets/product-variant-options.liquid in current Dawn (included by product-variant-picker.liquid; the exact markup shifts between releases). Dawn's own option_disabled flag is already computed there, so you can simply wrap the output in {% unless option_disabled %} … {% endunless %} instead of adding your own loop.
3. Wrap each option value's output in an availability check like the one above.
4. Test a single-option product, a multi-option product, and — importantly — what happens after a few selections, since the re-rendered markup comes from this same snippet.

Why it won't stay fixed

• Dawn updates several times a year, and updating replaces theme code. Your edit doesn't carry over; you get to re-apply it (and re-find where the markup moved) every release.
• It only fixes the product page. Storefront search and collection filters still know about the sold-out variant.
• Edge cases are on you. Products where everything is sold out, backorderable "continue selling" variants, untracked inventory — each needs its own condition, or the snippet does the wrong thing quietly.

The 5-minute alternative

VarHide does it without touching Dawn's code. You enable the VarHide app embed — a one-click toggle in Dawn's theme editor — to handle the variant picker, while channel-level unpublishing keeps hidden variants out of storefront search and collection filters. No Liquid edits, nothing to re-apply after Dawn updates (app embeds live outside the theme's files), and if you switch themes you just flip the toggle on again. Variants republish automatically when restocked, backorder variants are left alone by default, and a product whose variants are all sold out stays visible instead of 404ing.

Install it, enable the embed, pick the channels to manage, define "sold out" (including thresholds like "≤ 2 units"), enable automatic updates — done. The full comparison of every approach is in our 4-methods guide.

More theme guides: Impulse — or go back to the VarHide blog.