{%- unless product.has_only_default_variant -%} <variant-radios id="variant-radios-{{ section.id }}" class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {% if update_url == false %} data-update-url="false" {% endif %} {{ block.shopify_attributes }}> {%- for option in product.options_with_values -%} <fieldset class="js product-form__input {{ option.name }}"> <legend class="form__label">{{ option.name }}</legend> {% if option.name == 'Color' %} {% for value in option.values %} <input id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" type="radio" name="color" value="{{ value | escape }}" {% if option.selected_value == value %}checked{% endif %}> <label class="color-swatch {% if product.variants[0].option1 == value and product.variants[0].inventory_quantity == 0 %}preorder{% endif %}" style="background-image:url({{ value | append: '.jpg' | file_url }})" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-count="{{ forloop.index0 }}"></label> {% endfor %} {% endif %} {% if option.name == 'Size' %} {% for value in option.values %} <input id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" type="radio" name="size" value="{{ value | escape }}" {% if option.selected_value == value %}checked{% endif %}> <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="preorder-corner {% if product.variants[0].option2 == value and product.variants[0].inventory_quantity == 0 %}back-order{% endif %}">{{ value -}}</label> {% endfor %} {% endif %} </fieldset> {%- endfor -%} </variant-radios> {%- endunless -%} I have tried to add the "back-order" class if the inventory is 0, but the class is only visible on the first option. I want to add a feature where the size options reload based on the color selection, similar to how it functions on the web site you can check here.