How can I add 'Add to Cart' on main search in Crave?

TamWHB · January 24, 2023, 2:08am

Hello!

I have the most recent version of Crave and I used the advise from @LitExtension (I hope it’s ok to tag you! Seems like you are a great help!) gave from last year, but I wonder if there has been an update since, because I don’t see the desired change. I would love some help!

I added the parts in bold.

{{ ‘template-collection.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}

{%- case item.object_type -%} {%- when 'product' -%} {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%} {% render 'card-product', card_product: item, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, **show_quick_add: true,** lazy_load: lazy_load %}

LitExtension · January 27, 2023, 3:17am

Hi @TamWHB ,

Please send me the code of the whole main-search.liquid file, I will check it for you

TamWHB · February 6, 2023, 10:07pm

I’m not sure if this is the best way to send it, but here it is. Sorry for the delay! And thank you for your help!!

{{ ‘template-collection.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}

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

{%- endif -%}

.template-search__header { margin-bottom: 3rem; } .template-search__search { margin: 0 auto 3.5rem; max-width: 47.8rem; } .template-search__search .search { margin-top: 3rem; } .template-search--empty { padding-bottom: 18rem; } @media screen and (min-width: 750px) { .template-search__header { margin-bottom: 5rem; } } .search__button .icon { height: 1.8rem; }

{%- liquid
assign sort_by = search.sort_by | default: search.default_sort_by
assign terms = search.terms | escape
assign search_url = ‘?q=’ | append: terms | append: ‘&options%5Bprefix%5D=last&sort_by=’ | append: sort_by
-%}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if search.performed -%}

{%- else -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- if search.performed -%} {%- unless section.settings.enable_filtering or section.settings.enable_sorting -%} {%- if search.results_count > 0 -%}

{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}

{%- endif -%} {%- endunless -%} {%- if search.results_count == 0 and search.filters == empty -%}

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

{%- if search.performed -%} {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%}

{%- assign sort_by = search.sort_by | default: search.default_sort_by -%} {% render 'icon-caret' %}

{%- if search.results_count -%} {{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }} {%- elsif search.products_count == search.all_products_count -%} {{ 'products.facets.product_count_simple' | t: count: search.products_count }} {%- else -%} {{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }} {%- endif -%}

{%- endif -%} {%- if search.filters != empty -%} {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {%- endif -%} {%- endif -%}

{%- if search.results.size == 0 and search.filters != empty -%}

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

{%- else -%} {% paginate search.results by 24 %}

{%- case item.object_type -%} {%- when 'product' -%} {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%} {% render 'card-product', card_product: item, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, lazy_load: lazy_load %} {%- when 'article' -%} {% render 'article-card', article: item, show_image: true, show_date: section.settings.article_show_date, show_author: section.settings.article_show_author, show_badge: true, media_aspect_ratio: 1, lazy_load: lazy_load %} {%- when 'page' -%}

{{ item.title | truncate: 50 | escape }}

{{ 'templates.search.page' | t }}

{%- endcase -%}

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

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

{%- endif -%}

{% schema %}
{
“name”: “t:sections.main-search.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 5,
“step”: 1,
“default”: 4,
“label”: “t:sections.main-search.settings.columns_desktop.label”
},
{
“type”: “header”,
“content”: “t:sections.main-search.settings.header__1.content”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.main-search.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.main-search.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.main-search.settings.image_ratio.options__3.label”
}
],
“default”: “adapt”,
“label”: “t:sections.main-search.settings.image_ratio.label”
},
{
“type”: “checkbox”,
“id”: “show_secondary_image”,
“default”: false,
“label”: “t:sections.main-search.settings.show_secondary_image.label”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“default”: false,
“label”: “t:sections.main-search.settings.show_vendor.label”
},
{
“type”: “checkbox”,
“id”: “show_rating”,
“default”: false,
“label”: “t:sections.main-search.settings.show_rating.label”,
“info”: “t:sections.main-search.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”: “select”,
“id”: “filter_type”,
“options”: [
{
“value”: “horizontal”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.options__1.label”
},
{
“value”: “vertical”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.options__2.label”
},
{
“value”: “drawer”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.options__3.label”
}
],
“default”: “horizontal”,
“label”: “t:sections.main-collection-product-grid.settings.filter_type.label”,
“info”: “t:sections.main-collection-product-grid.settings.filter_type.info”
},
{
“type”: “checkbox”,
“id”: “enable_sorting”,
“default”: true,
“label”: “t:sections.main-collection-product-grid.settings.enable_sorting.label”
},
{
“type”: “header”,
“content”: “t:sections.main-search.settings.header__2.content”,
“info”: “t:sections.main-search.settings.header__2.info”
},
{
“type”: “checkbox”,
“id”: “article_show_date”,
“default”: true,
“label”: “t:sections.main-search.settings.article_show_date.label”
},
{
“type”: “checkbox”,
“id”: “article_show_author”,
“default”: false,
“label”: “t:sections.main-search.settings.article_show_author.label”
},
{
“type”: “header”,
“content”: “t:sections.main-search.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“default”: “2”,
“label”: “t:sections.main-search.settings.columns_mobile.label”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.main-search.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.main-search.settings.columns_mobile.options__2.label”
}
]
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
]
}
{% endschema %}

TamWHB · February 6, 2023, 10:08pm

Also, since it did not work initially, I took it out so it wouldn’t mess with the code, so this is how my site is running right now.

LitExtension · February 7, 2023, 7:22am

Hi @TamWHB ,

Please send me the code of card-product.liquid file, I will check it for you

mwpplatt · June 26, 2024, 1:25pm

Hi,

I’m having the same issue as @TamWHB . Here’s my liquid file with your additional line of code at line 280 (which is much further down than you suggested on the other thread but pretty sure this is where it ought to be).

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-search.css' | asset_url | stylesheet_tag }}

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

{% if section.settings.image_shape == 'blob' %}
  {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- liquid
  assign sort_by = search.sort_by | default: search.default_sort_by
  assign terms = search.terms | escape
  assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
-%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{% paginate search.results by 24 %}
  
    

      # 
        {%- if search.performed -%}
          {{- 'templates.search.title' | t -}}
        {%- else -%}
          {{- 'general.search.search' | t -}}
        {%- endif -%}
      
      
        {%- if settings.predictive_search_enabled -%}
          
        {%- endif -%}
      

      {%- if search.performed -%}
        {%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
          {%- if search.results_count > 0 -%}
            

              {{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}
            

          {%- endif -%}
        {%- endunless -%}
        {%- if search.results_count == 0 and search.filters == empty -%}
          

{{ 'templates.search.no_results' | t: terms: search.terms }}

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

    {%- if search.performed -%}
      {%- if section.settings.enable_sorting
        and section.settings.filter_type == 'vertical'
        and search.filters != empty
      -%}
        
      {%- endif -%}
      

        {%- if search.filters != empty -%}
          {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
            
              {% render 'facets',
                results: search,
                enable_filtering: section.settings.enable_filtering,
                enable_sorting: section.settings.enable_sorting,
                filter_type: section.settings.filter_type,
                paginate: paginate
              %}
            
          {%- endif -%}
        {%- endif -%}
        
          {%- if search.results.size == 0 and search.filters != empty -%}
            

              

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

                  {{
                    'sections.collection_template.use_fewer_filters_html'
                    | t: link: search_url, class: 'underlined-link link'
                  }}
                
              

            

          {%- else -%}
            
              

              
                {%- assign skip_card_product_styles = false -%}
                {%- for item in search.results -%}
                  {% assign lazy_load = false %}
                  {%- if forloop.index > 2 -%}
                    {%- assign lazy_load = true -%}
                  {%- endif -%}

                  - {%- case item.object_type -%}
                        {%- when 'product' -%}
                          {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
                          {% render 'card-product',
                            card_product: item,
                            media_aspect_ratio: section.settings.image_ratio,
                            image_shape: section.settings.image_shape,
                            show_secondary_image: section.settings.show_secondary_image,
                            show_vendor: section.settings.show_vendor,
                            show_rating: section.settings.show_rating,
                            show_quick_add: true,
                            lazy_load: lazy_load,
                            skip_styles: skip_card_product_styles
                          %}
                          {%- assign skip_card_product_styles = true -%}
                        {%- when 'article' -%}
                          {% render 'article-card',
                            article: item,
                            show_image: true,
                            show_date: section.settings.article_show_date,
                            show_author: section.settings.article_show_author,
                            show_badge: true,
                            media_aspect_ratio: 1,
                            lazy_load: lazy_load
                          %}
                        {%- when 'page' -%}
                        

                          

                            

                              

                                  ### 
                                  
                                      {{ item.title | truncate: 50 | escape }}
                                  
                                
                              

                              
                                
                                    {{- 'templates.search.page' | t -}}
                                
                              

                            

                          

                        

                      {%- endcase -%}
                  
                {%- endfor -%}
              

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

          {%- endif -%}
        

      

    {%- endif -%}
  

{% endpaginate %}
{% if section.settings.image_shape == 'arch' %}
  {% render 'mask-arch' %}
{%- endif -%}

{% schema %}
{
  "name": "t:sections.main-search.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 4,
      "label": "t:sections.main-search.settings.columns_desktop.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-search.settings.header__1.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-search.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-search.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-search.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-search.settings.image_ratio.label"
    },
    {
      "type": "select",
      "id": "image_shape",
      "options": [
        {
          "value": "default",
          "label": "t:sections.all.image_shape.options__1.label"
        },
        {
          "value": "arch",
          "label": "t:sections.all.image_shape.options__2.label"
        },
        {
          "value": "blob",
          "label": "t:sections.all.image_shape.options__3.label"
        },
        {
          "value": "chevronleft",
          "label": "t:sections.all.image_shape.options__4.label"
        },
        {
          "value": "chevronright",
          "label": "t:sections.all.image_shape.options__5.label"
        },
        {
          "value": "diamond",
          "label": "t:sections.all.image_shape.options__6.label"
        },
        {
          "value": "parallelogram",
          "label": "t:sections.all.image_shape.options__7.label"
        },
        {
          "value": "round",
          "label": "t:sections.all.image_shape.options__8.label"
        }
      ],
      "default": "default",
      "label": "t:sections.all.image_shape.label",
      "info": "t:sections.all.image_shape.info"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.main-search.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.main-search.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.main-search.settings.show_rating.label",
      "info": "t:sections.main-search.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": "select",
      "id": "filter_type",
      "options": [
        {
          "value": "horizontal",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
        },
        {
          "value": "vertical",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
        },
        {
          "value": "drawer",
          "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
        }
      ],
      "default": "horizontal",
      "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
      "info": "t:sections.main-collection-product-grid.settings.filter_type.info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-search.settings.header__2.content",
      "info": "t:sections.main-search.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "article_show_date",
      "default": true,
      "label": "t:sections.main-search.settings.article_show_date.label"
    },
    {
      "type": "checkbox",
      "id": "article_show_author",
      "default": false,
      "label": "t:sections.main-search.settings.article_show_author.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-search.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.main-search.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main-search.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main-search.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

Thanks

Mitch

p.s. used your script to move my site from Wix to Shopify a couple of years ago and was great!

Topic		Replies	Views
How can I add a Quick Add button to search results on the Crave theme? Technical Q&A	16	41	April 3, 2024
How to add Add to Cart / Choose Options button in search results in the Trade theme Store Design design , customizations	24	200	August 20, 2025
How can I add an 'Add to Cart' button on the Collections page for TASTE theme Shopify Discussion apps	8	22	October 5, 2022
#error! Technical Q&A	2	19	October 7, 2022
Adding Phone Number to Venture Theme Next to Cart and Search Bar Store Design	12	24	September 16, 2021

How can I add 'Add to Cart' on main search in Crave?

{{ 'templates.search.title' | t }}

{{ 'general.search.search' | t }}

{{ 'products.facets.sort_by_label' | t }}

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

{{ item.title | truncate: 50 | escape }}

How can I add 'Add to Cart' on main search in Crave?

{{ 'templates.search.title' | t }}

{{ 'general.search.search' | t }}

{{ 'products.facets.sort_by_label' | t }}

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

{{ item.title | truncate: 50 | escape }}

Related topics

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