Hide size variant buttons for non-stock variants

Store Design

Topic summary

Goal: Hide size variant buttons for non‑stock (sold‑out) variants in Shopify.

Solution (Dawn 13 theme):

  • Edit theme code > product-variant-options.liquid.
  • In the radio input for variant options, when option_disabled is true, add style=“display:none” to the input.
  • Render the label only if option_disabled == false. This effectively hides sold‑out variant buttons from the UI.
  • Key logic: option_disabled indicates an unavailable variant; conditionally hide the input and label to remove the button from view.

Outcome:

  • Confirmed working on Dawn 13. Marked as accepted solution.

Open issue (Empire theme):

  • A user reports the above approach does not work on the Empire theme after multiple attempts and requests guidance.
  • No alternative solution or follow‑up provided yet; remains unresolved for Empire.

Notes:

  • Code edits are central to understanding the fix; no additional assets are required.
  • Themes referenced: Dawn 13 (Shopify’s default theme) vs. Empire (third‑party theme with different template structure).
Summarized with AI on December 23. AI used: gpt-5.
1

Does anybody know how to hide the buttons of the non-stock variants in DAWN 13?

Thanks in advance for your help.

Regards,

screenshot1.jpeg
screenshot1.jpeg2058×1372 115 KB

2

1、Edit theme code

2、find the file: “product-variant-options.liquid” and edit it.

3、Find: “<input
type=“radio”
id=”{{ input_id }}"
name=“{{ option.name }}”
value=“{{ value | escape }}”
form=“{{ product_form_id }}”
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class=“disabled”
{% endif %}

{{ value -}} {{ label_unavailable }} " is modified as follows

"

<input
type=“radio”
id=“{{ input_id }}”
name=“{{ option.name }}”
value=“{{ value | escape }}”
form=“{{ product_form_id }}”
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class=“disabled” style=“display:none”
{% endif %}

{% if option_disabled == false %}

{{ value -}}
{{ label_unavailable }}

{% endif %}

"

1 Like
3

Works perfectly. I mark anwer as ‘Accepted solution’

Thanks for your help!

4

It does not work on the empire theme. I tried every solution in the community for two days. Do you know how to hide sold out variants in the Empire theme?

I would be grateful for a tip.