how to add the product option on collection page

[AvidBrio]

i am using the latest Dawn theme  here previews https://6hffebyzl6ksz3hp-15143478.shopifypreview.com 

we want to add the add to cart feature on collection list page 

here is product form code : clone from product details page 

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}

<link rel="preload" href="{{ 'component-rte.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
  {{ 'component-facets.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>

  <div class="page-width" id="main-collection-filters" data-id="{{ section.id }}">
    {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %}
  </div>
{%- endif -%}

<div id="ProductGridContainer">
  {%- paginate collection.products by section.settings.products_per_page -%}
    {%- if collection.products.size == 0 -%}
      <div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
        <div class="loading-overlay gradient"></div>
        <div class="title-wrapper center">
          <h2 class="title title--primary">
            {{ 'sections.collection_template.empty' | t }}<br>
            {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
          </h2>
        </div>
      </div>
    {%- else -%}
      <div class="collection page-width">
        <div class="loading-overlay gradient"></div>

        <ul id="product-grid" data-id="{{ section.id }}" class="
          grid grid--2-col negative-margin product-grid
          {% if collection.products_count < 4 %} grid--{{ collection.products_count }}-col-tablet{% else %}
            {% if collection.products_count == 4 %} grid--4-col-desktop{% else %} grid--3-col-tablet grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}
          {% endif %}">
          {%- for product in collection.products -%}
            <li class="grid__item">
              {% render 'product-card',
                product_card_product: product,
                media_size: section.settings.image_ratio,
                show_secondary_image: section.settings.show_secondary_image,
                add_image_padding: section.settings.add_image_padding,
                show_vendor: section.settings.show_vendor,
                show_image_outline: section.settings.show_image_outline,
                show_rating: section.settings.show_rating
              %}
            </li>
          {%- endfor -%}

         

          {%- for product in collection.products -%}
          <li class="grid__item">
            {% render 'sm-collection-cart',
            product: product,
              media_size: section.settings.image_ratio,
              show_secondary_image: section.settings.show_secondary_image,
              add_image_padding: section.settings.add_image_padding,
              show_vendor: section.settings.show_vendor,
              show_image_outline: section.settings.show_image_outline,
              show_rating: section.settings.show_rating
            %}
          </li>
        {%- endfor -%}

        </ul>

        {%- if paginate.pages > 1 -%}
          {% render 'pagination', paginate: paginate, anchor: '' %}
        {%- endif -%}
      </div>
    {%- endif -%}
  {%- endpaginate -%}
</div>

{% schema %}
{
  "name": "t:sections.main-collection-product-grid.name",
  "class": "spaced-section collection-grid-section",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__3.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.add_image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.show_image_outline.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.show_rating.label",
      "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
    },
    {
      "type": "header",
      "content": "t:sections.main-collection-product-grid.settings.header__1.content"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
      "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    },
    {
      "type": "checkbox",
      "id": "collapse_on_larger_devices",
      "default": false,
      "label": "t:sections.main-collection-product-grid.settings.collapse_on_larger_devices.label"
    }
  ]
}
{% endschema %}

[NileshTejani]

@AvidBrio 

You need to add  this code inside <li>

<form method="post" action="/cart/add">

  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

  <input min="1" type="number" id="quantity" name="quantity" value="1"/>

  <input type="submit" value="Add to cart" class="btn" />

</form>

</li>

[AvidBrio]

@NileshTejani   Thanks for support 
But as per my code  it was work first variant first  add to cart but  i need to add variant add to cart based on the use selected variant.  

have you checked the store preview links ?

[AvidBrio]

@NileshTejani   here is form code 

{% render 'sm-collection-cart', %}

<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>


{%- assign product_form_id = 'product-form-' | append: product.id -%}

 
<product-form class="product-form">
    <div class="product-form__error-message-wrapper" role="alert" hidden>
      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
        <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
        <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
        <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
        <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
      </svg>
      <span class="product-form__error-message"></span>
    </div>

    {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
      
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>

      <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
        <label class="form__label" for="Quantity-{{ section.id }}">
          {{ 'products.product.quantity.label' | t }}
        </label>

        <quantity-input class="quantity">
          <button class="quantity__button no-js-hidden" name="minus" type="button">
            <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
            {% render 'icon-minus' %}
          </button>
          <input class="quantity__input"
              type="number"
              name="quantity"
              id="Quantity-{{ section.id }}"
              min="1"
              value="1"
              form="{{ product_form_id }}"
            >
          <button class="quantity__button no-js-hidden" name="plus" type="button">
            <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
            {% render 'icon-plus' %}
          </button>
        </quantity-input>
      </div>



      {%- unless product.has_only_default_variant -%}
      {%- if block.settings.picker_type == 'button' -%}
        <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
          {%- for option in product.options_with_values -%}
              <fieldset class="js product-form__input">
                <legend class="form__label">{{ option.name }}</legend>
                {%- for value in option.values -%}
                  <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                        name="{{ option.name }}"
                        value="{{ value | escape }}"
                        form="{{ product_form_id }}"
                        {% if option.selected_value == value %}checked{% endif %}
                  >
                  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                    {{ value }}
                  </label>
                {%- endfor -%}
              </fieldset>
          {%- endfor -%}
          <script type="application/json">
            {{ product.variants | json }}
          </script>
        </variant-radios>
      {%- else -%}
        <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
          {%- for option in product.options_with_values -%}
            <div class="product-form__input product-form__input--dropdown">
              <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                {{ option.name }}
              </label>
              <div class="select">
                <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                  class="select__select"
                  name="options[{{ option.name | escape }}]"
                  form="{{ product_form_id }}"
                >
                  {%- for value in option.values -%}
                    <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                      {{ value }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
            </div>
          {%- endfor -%}

          <script type="application/json">
            {{ product.variants | json }}
          </script>
        </variant-selects>
      {%- endif -%}
    {%- endunless -%}



    <noscript class="product-form__noscript-wrapper-{{ section.id }}">
        <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
          <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
          <div class="select">
            <select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
              {%- for variant in product.variants -%}
                <option
                  {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                  {% if variant.available == false %}disabled{% endif %}
                  value="{{ variant.id }}"
                >
                  {{ variant.title }}
                  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                  - {{ variant.price | money | strip_html }}
                </option>
              {%- endfor -%}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      </noscript>



    {{ form | payment_terms }}

      <div class="product-form__buttons">
        <button
          type="submit"
          name="add"
          class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
        {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
        >
            <span>
              {%- if product.selected_or_first_available_variant.available -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- else -%}
                {{ 'products.product.sold_out' | t }}
              {%- endif -%}
            </span>
            <div class="loading-overlay__spinner hidden">
              <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
        </button>
        {%- if block.settings.show_dynamic_checkout -%}
          {{ form | payment_button }}
        {%- endif -%}
      </div>
    {%- endform -%}
  </product-form>

[AvidBrio · Accepted solution]

Theme Shopify Dawn  

Problems analysis and solved  : how i clone the theme feature from the featured production section.  create an new snippets  theme/snippest/sm-feature-clone.liquid   same code coped from the  theme/section/featured-product.liquid 

Output : 

list of change change the collection list section "main-collection-product-grid.liquid "  line number  41 

Replace the code line " {% render 'product-card', "   with " {% render 'sm-feature-clone', " 

{%- for product in collection.products -%}
 
         

          <li class="grid__item">
              
            {% render 'sm-feature-clone',
            product_card_product: product,
              media_size: section.settings.image_ratio,
              show_secondary_image: section.settings.show_secondary_image,
              add_image_padding: section.settings.add_image_padding,
              show_vendor: section.settings.show_vendor,
              show_image_outline: section.settings.show_image_outline,
              show_rating: section.settings.show_rating
            %}

            </li>
            {%- endfor -%}
 

 
make change into the  "theme/snippest/sm-feature-clone.liquid" 
*** find and replace with    section.id with product_card_product.id  ****


Full code solution  theme/snippest/sm-feature-clone.liquid

{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
{%- comment -%} {%- endcomment -%}
{%- assign product = product_card_product -%}
   
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
  <link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
  <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

<section class="{% if section.settings.secondary_background %}background-secondary{% else %}spaced-section{% endif %}">
  <div class="page-width">
    <div class="featured-product product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
      <div class="grid__item product__media-wrapper">
        <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ product_card_product.id }}">
          {{ "accessibility.skip_to_product_info" | t }}
        </a>
        <div class="product__media-list">
          {%- if product.selected_or_first_available_variant.featured_media != null -%}
            {%- assign media = product.selected_or_first_available_variant.featured_media -%}
            <div class="product__media-item" data-media-id="{{ product_card_product.id }}-{{ media.id }}">
              {% render 'product-thumbnail', media: media, position: 'featured', loop: section.settings.enable_video_looping, modal_id: product_card_product.id, xr_button: false %}
            </div>
          {%- endif -%}
          {%- liquid
            assign media_to_render = product.featured_media.id
            for variant in product.variants
              assign media_to_render = media_to_render | append: variant.featured_media.id | append: ' '
            endfor
          -%}
          {%- for media in product.media -%}
            {%- if media_to_render contains media.id and media.id != product.selected_or_first_available_variant.featured_media.id -%}
              <div class="product__media-item" data-media-id="{{ product_card_product.id }}-{{ media.id }}">
                {% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: product_card_product.id, xr_button: false %}
              </div>
            {%- endif -%}
          {%- endfor -%}
        </div>
        {%- if first_3d_model -%}
          <button
            class="button button--full-width product__xr-button"
            type="button"
            aria-label="{{ 'products.product.xr_button_label' | t }}"
            data-shopify-xr
            data-shopify-model3d-id="{{ first_3d_model.id }}"
            data-shopify-title="{{ product.title | escape }}"
            data-shopify-xr-hidden
          >
            {% render 'icon-3d-model' %}
            {{ 'products.product.xr_button' | t }}
          </button>
        {%- endif -%}
      </div>
      <div class="product__info-wrapper grid__item">
        <div id="ProductInfo-{{ product_card_product.id }}" class="product__info-container">
          {%- assign product_form_id = 'product-form-' | append: product_card_product.id -%}

         
             
            
              <h2 class="h1 product__title" {{ block.shopify_attributes }}>
                {%- if product.title != blank -%}
                  {{ product.title | escape }}
                {%- else -%}
                  {{ 'onboarding.product_title' | t }}
                {%- endif -%}
              </h2>
           
              <div class="no-js-hidden" id="price-{{ product_card_product.id }}" role="status" {{ block.shopify_attributes }}>
                {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
              </div>
              {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
                <div class="product__tax caption rte">
                  {%- if shop.taxes_included -%}
                    {{ 'products.product.include_taxes' | t }}
                  {%- endif -%}
                  {%- if shop.shipping_policy.body != blank -%}
                    {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- endif -%}
                </div>
              {%- endif -%}
              {%- if product != blank -%}
                <div {{ block.shopify_attributes }}>
                  {%- form 'product', product -%}
                    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                    {{ form | payment_terms }}
                  {%- endform -%}
                </div>
              {%- endif -%}
            
              <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                <label class="form__label" for="Quantity-{{ product_card_product.id }}">
                  {{ 'products.product.quantity.label' | t }}
                </label>
                <quantity-input class="quantity">
                  <button class="quantity__button no-js-hidden" name="minus" type="button">
                    <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                    {% render 'icon-minus' %}
                  </button>
                  <input class="quantity__input"
                      type="number"
                      name="quantity"
                      id="Quantity-{{ product_card_product.id }}"
                      min="1"
                      value="1"
                      form="{{ product_form_id }}"
                    >
                  <button class="quantity__button no-js-hidden" name="plus" type="button">
                    <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                    {% render 'icon-plus' %}
                  </button>
                </quantity-input>
              </div>
             
              <script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
              <share-button id="Share-{{ product_card_product.id }}" class="share-button" {{ block.shopify_attributes }}>
                <button class="share-button__button hidden">
                  {% render 'icon-share' %}
                  {{ block.settings.share_label | escape }}
                </button>
                <details id="Details-{{ block.id }}-{{ product_card_product.id }}">
                  <summary class="share-button__button">
                    {% render 'icon-share' %}
                    {{ block.settings.share_label | escape }}
                  </summary>
                  <div id="Product-share-{{ product_card_product.id }}" class="share-button__fallback motion-reduce">
                    <div class="field">
                      <span id="ShareMessage-{{ product_card_product.id }}" class="share-button__message hidden" role="status">
                      </span>
                      <input type="text"
                            class="field__input"
                            id="url"
                            value="{{ product.selected_variant.url | default: product.url | prepend: shop.url }}"
                            placeholder="{{ 'general.share.share_url' | t }}"
                            onclick="this.select();"
                            readonly
                      >
                      <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                    </div>
                    <button class="share-button__close hidden no-js-hidden">
                      {% render 'icon-close' %}
                      <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
                    </button>
                    <button class="share-button__copy no-js-hidden">
                      {% render 'icon-clipboard' %}
                      <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                    </button>
                  </div>
                </details>
              </share-button>
          
              {%- unless product.has_only_default_variant -%}
                {%- if block.settings.picker_type != 'button' -%}
                  <variant-radios class="no-js-hidden" data-section="{{ product_card_product.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                        <fieldset class="js product-form__input">
                          <legend class="form__label">{{ option.name }}</legend>
                          {%- for value in option.values -%}
                            <input type="radio" id="{{ product_card_product.id }}-{{ option.position }}-{{ forloop.index0 }}"
                                  name="{{ option.name }}"
                                  value="{{ value | escape }}"
                                  form="{{ product_form_id }}"
                                  {% if option.selected_value == value %}checked{% endif %}
                            >
                            <label for="{{ product_card_product.id }}-{{ option.position }}-{{ forloop.index0 }}">
                              {{ value }}
                            </label>
                          {%- endfor -%}
                        </fieldset>
                    {%- endfor -%}
                    <script type="application/json">
                      {{ product.variants | json }}
                    </script>
                  </variant-radios>
                {%- else -%}
                  <variant-selects class="no-js-hidden" data-section="{{ product_card_product.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                      <div class="product-form__input product-form__input--dropdown">
                        <label class="form__label" for="Option-{{ product_card_product.id }}-{{ forloop.index0 }}">
                          {{ option.name }}
                        </label>
                        <div class="select">
                          <select id="Option-{{ product_card_product.id }}-{{ forloop.index0 }}"
                            class="select__select"
                            name="options[{{ option.name | escape }}]"
                            form="{{ product_form_id }}"
                          >
                            {%- for value in option.values -%}
                              <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                {{ value }}
                              </option>
                            {%- endfor -%}
                          </select>
                          {% render 'icon-caret' %}
                        </div>
                      </div>
                    {%- endfor -%}

                    <script type="application/json">
                      {{ product.variants | json }}
                    </script>
                  </variant-selects>
                {%- endif -%}
              {%- endunless -%}

              <noscript class="product-form__noscript-wrapper-{{ product_card_product.id }}">
                <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
                  <label class="form__label" for="Variants-{{ product_card_product.id }}">{{ 'products.product.product_variants' | t }}</label>
                  <div class="select">
                    <select name="id" id="Variants-{{ product_card_product.id }}" class="select__select" form="{{ product_form_id }}">
                      {%- for variant in product.variants -%}
                        <option
                          {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                          {% if variant.available == false %}disabled{% endif %}
                          value="{{ variant.id }}"
                        >
                          {{ variant.title }}
                          {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                          - {{ variant.price | money | strip_html }}
                        </option>
                      {%- endfor -%}
                    </select>
                    {% render 'icon-caret' %}
                  </div>
                </div>
              </noscript>
            
              <div {{ block.shopify_attributes }}>
                {%- if product != blank -%}
                  <product-form class="product-form">
                    <div class="product-form__error-message-wrapper" role="alert" hidden>
                      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                        <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                        <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                        <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                        <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                      </svg>
                      <span class="product-form__error-message"></span>
                    </div>

                    {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
                      <div class="product-form__buttons">
                        <button
                          type="submit"
                          name="add"
                          class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                        >
                            <span>
                              {%- if product.selected_or_first_available_variant.available -%}
                                {{ 'products.product.add_to_cart' | t }}
                              {%- else -%}
                                {{ 'products.product.sold_out' | t }}
                              {%- endif -%}
                            </span>
                            <div class="loading-overlay__spinner hidden">
                              <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                              </svg>
                            </div>
                        </button>
                        {%- if block.settings.show_dynamic_checkout -%}
                          {{ form | payment_button }}
                        {%- endif -%}
                      </div>
                    {%- endform -%}
                  </product-form>
                {%- else -%}
                  <div class="product-form">
                    <div class="product-form__buttons form">
                      <button
                        type="submit"
                        name="add"
                        class="product-form__submit button button--full-width button--primary"
                        disabled
                      >
                        {{ 'products.product.sold_out' | t }}
                      </button>
                    </div>
                  </div>
                {%- endif -%}
              </div>
            
              {%- if product.metafields.reviews.rating.value != blank -%}
                {% liquid
                  assign rating_decimal = 0
                  assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
                  if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                  endif
                %}
                <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
                  <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
                </div>
                <p class="rating-text caption">
                  <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
                </p>
                <p class="rating-count caption">
                  <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
                  <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
                </p>
              {%- endif -%}
          
          
        <a href="{{ product.url }}" class="link product__view-details animate-arrow">
          {{ 'products.product.view_full_details' | t }}
          {% render 'icon-arrow' %}
        </a>
        </div>
      </div>
    </div>

    <product-modal id="ProductModal-{{ product_card_product.id }}" class="product-media-modal media-modal">
      <div class="product-media-modal__dialog" role="dialog" aria-label="{{ 'products.modal.label' | t }}" aria-modal="true" tabindex="-1">
        <button id="ModalClose-{{ product_card_product.id }}" type="button" class="product-media-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>

        <div class="product-media-modal__content" role="document" aria-label="{{ 'products.modal.label' | t }}" tabindex="0">
          {%- liquid
            if product.selected_or_first_available_variant.featured_media != null
              assign media = product.selected_or_first_available_variant.featured_media
              render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
            endif
          -%}

          {%- for media in product.media -%}
            {%- liquid
              if section.settings.hide_variants and media_to_render contains media.id
                assign variant_image = true
              else
                assign variant_image = false
              endif

              unless media.id == product.selected_or_first_available_variant.featured_media.id
                render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
              endunless
            -%}
          {%- endfor -%}
        </div>
      </div>
    </product-modal>
  </div>
</section>

<script> 

  if (!customElements.get('product-modal')) {
    customElements.define('product-modal', class ProductModal extends ModalDialog {
      constructor() {
        super();
      }

      hide() {
        super.hide();
      }

      show(opener) {
        super.show(opener);
        this.showActiveMedia();
      }

      showActiveMedia() {
        this.querySelectorAll(`[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])`).forEach((element) => {
            element.classList.remove('active');
          }
        )
        const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`);
        const activeMediaTemplate = activeMedia.querySelector('template');
        const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null;
        activeMedia.classList.add('active');
        activeMedia.scrollIntoView();

        const container = this.querySelector('[role="document"]');
        container.scrollLeft = (activeMedia.width - container.clientWidth) / 2;

        if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube'))
          activeMedia.loadContent();
      }
    });
  }
</script>

<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- if first_3d_model -%}
  <script type="application/json" id="ProductJSON-{{ product.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
  <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}

{%- liquid
  if product.selected_or_first_available_variant.featured_media
    assign seo_media = product.selected_or_first_available_variant.featured_media
  else
    assign seo_media = product.featured_media
  endif
-%}

<script type="application/ld+json">
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": {{ product.title | json }},
    "url": {{ shop.url | append: product.url | json }},
    {% if seo_media -%}
      {%- assign media_size = seo_media.preview_image.width | append: 'x' -%}
      "image": [
        {{ seo_media | img_url: media_size | prepend: "https:" | json }}
      ],
    {%- endif %}
    "description": {{ product.description | strip_html | json }},
    {% if product.selected_or_first_available_variant.sku != blank -%}
      "sku": {{ product.selected_or_first_available_variant.sku | json }},
    {%- endif %}
    "brand": {
      "@type": "Thing",
      "name": {{ product.vendor | json }}
    },
    "offers": [
      {%- for variant in product.variants -%}
        {
          "@type" : "Offer",
          {%- if variant.sku != blank -%}
            "sku": {{ variant.sku | json }},
          {%- endif -%}
          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : {{ variant.price | divided_by: 100.00 | json }},
          "priceCurrency" : {{ cart.currency.iso_code | json }},
          "url" : {{ shop.url | append: variant.url | json }}
        }{% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ]
  }
</script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return (msie > 0 || trident > 0);
    }

    if (!isIE()) return;
    const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
    const noScriptInputWrapper = document.createElement('div');
    const variantSwitcher = document.querySelector('variant-radios[data-section="{{ product_card_product.id }}"]') || document.querySelector('variant-selects[data-section="{{ product_card_product.id }}"]');
    noScriptInputWrapper.innerHTML = document.querySelector('.product-form__noscript-wrapper-{{ product_card_product.id }}').textContent;
    variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;

    document.querySelector('#Variants-{{ product_card_product.id }}').addEventListener('change', function(event) {
      hiddenInput.value = event.currentTarget.value;
    });
  });
</script>