How to add Add to Cart / Choose Options button in search results in the Trade theme

Hello,

I need help for adding add to card / choose options button in search results on product cards.

I am using Trade theme and it does show on product cards in collections pages:

But it does not show when you search products:

I need to show the same in the search results as well so that when customers search for some products, they are able to add products in their cart without going to the products page and back.

Thanks,

What I would do is go into edit theme code and find where the add to cart buttons are at in a .liquid file. Then go to the .liquid file for the search results and place them in there with the loop code for the search results. I don’t have your theme in front of me or I could get into specifics.

Hi @metroatlantawsl ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

  1. sections/main-search.liquid

  2. Add code below to top file

{{ 'quick-add.css' | asset_url | stylesheet_tag }}

  1. Find "{% render ‘card-product’, "

  2. Update code likes the screenshot

{% 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,
                          lazy_load: lazy_load,
                          quick_add: 'standard',
                          section_id: section.id
                        %}

  1. In the case that you didn’t update any code on this file. You can replace all code with code below
{{ 'quick-add.css' | asset_url | stylesheet_tag }}

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

              
                {%- 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,
                            lazy_load: lazy_load,
                            quick_add: 'standard',
                            section_id: section.id
                          %}
                        {%- 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 %}

Hi
First of all, thank you very much, of course, that’s great.
But I have two questions and requests:

  1. Can I use + & - instead of Add to cart, like when browsing categories ?

  1. In rings, when I have the Choose option, the option to choose sizes doesn’t open for me, is there a solution?

Hi,

Could you share your store URL? I will help to take a look it.

  1. Would you like to replace ''add to cart" text to “+”?

  2. which theme are you using?

Hi There,

this really helps . but for me there is a problem . i am using “bulk” option instead of quick_add: ‘standard’

i tried replace standard with bulk. it works but . if i try to add products in the cart it working , product is not adding into the cart.

It’s been a year from when this convo started. I will say I haven’t read the entire thing but may be i can take a look at your requirement. I have worked on the trade theme before if you are working on it.

You can reach out via personal links on my profile for a convenient conversation and collaboration.

Best

Hi @tanaybhalodi ,

You need add some code for this featured.

Maybe I suggest you install a free theme with newest( ex: dawn theme)

  1. Go to sections/main-collection-product-grid.liquid
  2. Refer screenshot below to copy code

3. Put code to sections/main-search.liquid

Thanks @EBOOST for responding.

i am currently using shopify’s - “publisher” theme

it really works (let me share a ss)

there is only one problem

i have a 1 product with multiple variants and another product with single variant

“choose options” for multiple product variants works perfect

but here comes the problem. if the product have no other variants it shows [- 0 +]

but if i add the value from 0 to 1 or 2 it is not working for single variant products where there is [- 0 +] (it keeps loading)

product is not going in the cart

and product with “choose more” option works perfect (which have multiple product variant)

waiting for your reply :slight_smile: