product-shopify-test-variants.liquid

<!--SINGLE PRODUCT-->
<section data-section-id="{{ section.id }}" data-section-type="product" class="p-single-product">


    <!--product header-->
    <header role="banner" class="p-single-product__header">

        <h1 class="p-single-product__title u-a4 u-fw-400 js-animation-element u-visually-hidden">
            {{ product.title }}
        </h1>

    </header>
    <!--end product header-->

    <!--product content-->
    <div class="p-single-product__content js-animation-element u-visually-hidden">

        <!--image wrapper-->
        {%- assign current_variant = product.selected_or_first_available_variant -%}
        {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

        <div class="p-single-product__image-wrapper">

            <!--image-->
            <div class="p-single-product__single-image-wrapper">

                <div class="p-single-product__single-image js-lazy-load"
                     data-bg="url({{ product.featured_image.src | img_url: '520x' }})"></div>

                <div class="p-single-product__single-image-bg"
                     style="background-color: {{ block.settings.sh_product_color }}"></div>

            </div>
            <!--end image-->

        </div>
        <!--end image wrapper-->

        <!--variant wrapper-->
        <div class="p-single-product__variant wrapper">

            <p 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 %}

            </p>

            {% form 'product', product, data-product-form: '', data-product-handle: product.handle, data-enable-history-state: 'true' %}

                <div class="js">

                    {% for variant in product.variants %}
                        <input type="radio"
                               name="options[product]"
                               id="Option{{ forloop.index }}"
                               value="{{ variant.id | escape }}"
                               data-variant="{{ variant.id }}"
                               {% if variant == product.selected_or_first_available_variant %}checked{% endif %}>
                        <label for="Option{{ forloop.index }}">
                            {{ variant.title }} {{ variant.price | money }}
                        </label>
                    {% endfor %}

                </div>

                <noscript>
                    <select name="id">
                        {% 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>
                </noscript>

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

                <button
                        class="button button--filled button--small u-b4 u-fw-700"
                        type="submit"
                        name="add"
                        data-submit-button
                        {% unless current_variant.available %}disabled="disabled"{% endunless %}>
                    <span data-submit-button-text>
                        {% if current_variant.available %}
                            {{ 'products.product.add_to_cart' | t }}
                        {% else %}
                            {{ 'products.product.sold_out' | t }}
                        {% endif %}
                    </span>
                </button>

            {% endform %}

        </div>
        <!--end variant wrapper-->

    </div>
    <!--end product content-->

</section>
<!--end SINGLE PRODUCT-->

{% schema %}
    {
    "name": "Product pages",
    "class": "product",
    "settings": [
    {
    "type": "checkbox",
    "id": "show_share_buttons",
    "label": "Show social sharing buttons",
    "default": true
    }
    ]
    }
{% endschema %}