product-01.liquid

<section data-section-id="{{ section.id }}" data-section-type="product">

  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

  <div class="product__main">
    <div class="product__left">
      <img class="product__image" src="{{ product.featured_image | img_url: '800x800', crop: 'bottom' }}" alt="{{ product.featured_image.alt }}" />
    </div>

    <div class="product__right">
      <div class="product__header">
        <h1 class="product__title">{{ product.title }}</h1>
        <strong class="product__price">{{ product.price | money }}</strong>
      </div>

      <div class="product__description">
        <p>
          {{ product.description }}
        </p>
      </div>

      {% form 'product', product, data-product-form: '', data-product-handle: product.handle, data-enable-history-state: 'true' %}
        {% unless product.has_only_default_variant %}
          {% for option in product.options_with_values %}
            <div class="js product__option-wrapper">
              <strong class="product__option-name">{{ option.name }}</strong>

              {% for value in option.values %}
                <input class="radio--hidden" type="radio" id="Option{{ option.position }}-{{ value }}" name="options[{{ option.name }}]" value="{{ value }}"{% if option.selected_value == value %} checked{% endif %}>
                <label class="label__swatch swatch--{{ value | handleize }}" for="Option{{ option.position }}-{{ value }}">
                  <span>
                    {{ value }}
                  </span>
                </label>
              {% endfor %}
            </div>
          {% endfor %}
        {% endunless %}

        <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>

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

        <button
          type="submit"
          name="add"
          class="atc"
          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>
  </div>
</section>

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