Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

how to add the product option on collection page

AvidBrio
Shopify Expert
295 17 29

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

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
Accepted Solution (1)
AvidBrio
Shopify Expert
295 17 29

This is an 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 : 

AvidBrio_0-1640067326106.png

 


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>

 

 



If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com

View solution in original post

Replies 4 (4)

NileshTejani
Shopify Partner
202 12 43

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

- Did we solve your issue? Like & Mark As Solution to help the community

Should you need any direct help:
Get connected: Upwork | Help Center
AvidBrio
Shopify Expert
295 17 29

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

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
AvidBrio
Shopify Expert
295 17 29

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

 

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
AvidBrio
Shopify Expert
295 17 29

This is an 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 : 

AvidBrio_0-1640067326106.png

 


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>

 

 



If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com