How to add the product option on collection page

Retired Boards Appdev Store Design
1

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

{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
  {{ 'component-facets.css' | asset_url | stylesheet_tag }}
  

  

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

{%- endif -%}

  {%- paginate collection.products by section.settings.products_per_page -%}
    {%- if collection.products.size == 0 -%}
      

        

        
          ## 
            {{ 'sections.collection_template.empty' | t }}

            {{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "underlined-link link" }}
          
        

      

    {%- else -%}
      
        

        
          {%- for product in collection.products -%}
            - {% 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
                %}
            

          {%- endfor -%}

         

          {%- for product in collection.products -%}
          - {% 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
              %}
          
        {%- endfor -%}

        

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

    {%- endif -%}
  {%- endpaginate -%}

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

@AvidBrio

You need to add this code inside

    • 3

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

    4

    @NileshTejani here is form code

    {% render ‘sm-collection-cart’, %}

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

    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
    AvidBrio_0-1640067326106.png1667×910 137 KB

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

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

            

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

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

{%- if first_3d_model -%}
  
  
{%- 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
-%}