{% assign current_variant = product.selected_or_first_available_variant %} {% comment %} {% unless product.has_only_default_variant %}{% endunless %} {% endcomment %} {% include 'product-head' %}
    {% for image in product.images %}
  • {{ image.alt | escape }}
    • {% endfor %}

{{ product.title }}

{{ product.description }}
{% unless product.has_only_default_variant %}
use selects
{% for option in product.options_with_values %}
{%- capture options -%} {% for value in option.values %} {% endfor %} {%- endcapture -%} {%- capture attributes -%} data-option-select data-index='{{ forloop.index0 }}' {%- endcapture -%} {% include 'component-select' with label: option.name, name: option.name, attributes: attributes options: options %}
{% endfor %}
or radios
{% for option in product.options_with_values %}
{% for value in option.values %} {% include 'component-radio' with label: value, value: value, name: option.name, checked: option.selected_value == value %} {% endfor %}
{% endfor %}
{% endunless %} {%- capture options -%} {% for variant in product.variants %} {% endfor %} {%- endcapture -%} {% include 'component-select' with name: 'id', options: options, attributes: 'data-option-main', %}
{% include 'component-counter' %}
{{ current_variant.price | money }} {{ current_variant.compare_at_price | money }}
{%- capture cta -%} {% if product.available %} Add to Cart {% else %} Out of Stock {% endif %} {%- endcapture -%} {% include 'component-button' with tag: 'button', name: 'add', type: 'submit', className: 'js-add-to-cart', cta: cta %}