product-variants-with-radiobuttons.liquid

{% form 'product', product %}
	{% unless product.has_only_default_variant %}
		{% for option in product.options_with_values %}
			<div class="selector-wrapper js">
				{% for value in option.values %}
					<input
						data-single-option-selector
						data-index="option{{ option.position }}"
						id="SingleOptionSelector-{{ option.position }}-{{ forloop.index }}"
						type="radio"
						name="SingleOptionSelector-{{ option.position }}"
						value="{{ value | escape }}"
						{% if option.selected_value == value %}checked="checked"{% endif %}
					/>

					<label for="SingleOptionSelector-{{ option.position }}-{{ forloop.index }}">
						{{ value }}
					</label>
				{% endfor %}
			</div>
		{% endfor %}
	{% endunless %}

	<select name="id" class="no-js" data-product-select>
		{% for variant in product.variants %}
			<option
				{% if variant == current_variant %}selected="selected"{% endif %}
				{% unless variant.available %}disabled="disabled"{% endunless %}
				value="{{ variant.id }}">
					{{ variant.title }}
			</option>
		{% endfor %}
	</select>

	<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
	<input type="number" id="Quantity" name="quantity" value="1" min="1">

	<div data-price-wrapper>
		<span data-product-price>
			{{ current_variant.price | money }}
		</span>

		{% if product.compare_at_price_max > product.price %}
			<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>

			<s data-compare-price>
				{% if current_variant.compare_at_price > current_variant.price %}
					{{ current_variant.compare_at_price | money }}
				{% endif %}
			</s>
		{% endif %}
	</div>

	<button
		type="submit"
		name="add"
		data-add-to-cart
		{% unless current_variant.available %}disabled="disabled"{% endunless %}>
        <span data-add-to-cart-text>
            {% if current_variant.available %}
				{{ 'products.product.add_to_cart' | t }}
			{% else %}
				{{ 'products.product.sold_out' | t }}
			{% endif %}
        </span>
	</button>
{% endform %}