Insert 'Add to cart' Button on Search Results

[JourneysMade]

Hi, I want to add the 'Add to cart' button on my search results page but I can't seem to find a way of doing it. I'm using the Dawn theme. 

It shows on the collection pages but not on the search results page. 

[Litos · Accepted solution]

Hi @JourneysMade,

Please go to main-search.liquid file and follow these steps:

- Step 1: Please add code here:

Code:

<link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>

- Step 2: Please add code here:

Code:

show_quick_add: true,

Hope it helps!

[JourneysMade]

Thank you so much, this worked and is exactly what I was looking for. 

[Victor-Joey]

I tried this but didn't work for me. I am using the spotlight Theme

[Raxsoller]

Where can I put the code on Kalles Theme? thanks

[StarSparky]

Hello sir,

I am using the same dawn theme, however code implemented but nothing change at all. Could you please advice, thank you

[Summer]

Hey, @StarSparky! I would suggest using an app to achieve this feature. Add to cart button ‑ Carty is a great app you can use. Besides using an app, you have the option to hire a Shopify Expert to help with coding customizations.

[StarSparky]

Hello Summer, i actually did tried using that app before, however it shows up indifferent on my website which does not look appealing. Is there any other app or implement code that I can use?

[Ollie]

Hey @StarSparky.

Thanks for the quick response. 

I would suggest the following third-party applications: 

• GA: Sticky Add to Cart Button 
• Add to cart button - FoxCart
• qikify Sticky Add To Cart

Let us know what you think.

[Robin95]

Hi @StarSparky.

I have found the new solution for this without using the apps you can find it here on this page!

[Robin95]

Looks like after updating this does not work any longer. But I found the new solution for this.

First always take a backu of the code before editing this! 

Step 1 - Add the following code in the begin section of main-search.liquid

{%- unless section.settings.quick_add == 'none' -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
{%- endunless -%}

{%- if section.settings.quick_add == 'standard' -%}
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{%- if section.settings.quick_add == 'bulk' -%}
  <script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

 Here the example wher to paste:

Step 2 - Add the following code in main-search.liquid

For me this code whas located on line 270

{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}

The full line code is as following now after adding the above code:

class="grid product-grid  grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}"

Example of implementation

Step 3 -  Add the following code in main-search.liquid

Add this code in the card-product and article-card section of the code for me this was on line 298 and 311

quick_add: section.settings.quick_add,
section_id: section.id

Here my example were to paste this code

Step 4 - Add the following code in main-search.liquid

Add this code in the under part of the liquid. For me this was on line 542.

    {
      "type": "select",
      "id": "quick_add",
      "default": "none",
      "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
      "info": "t:sections.main-collection-product-grid.settings.quick_add.info",
      "options": [
        {
          "value": "none",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
        },
        {
          "value": "standard",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
        },
        {
          "value": "bulk",
          "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
        }
      ]
    },

Here my example were to paste this code:

Don't forget to save the changes in the code! Now you can close the code editor, we are done here.

Step 5 - enable quick add to cart button in the search result section on your theme editor.

No code has to be added anymore, we only need to activate the code in the reght section of the site editor page, like shown in the screenshots below.

First we need to go the search page and make a product search My page is in Dutch as my location is in Belgium Flanders but the layout is the same so with these screenshots you should be able to find it:

When on the search page you can make a search and the search result page will show up now, when clicking on it you can see the availible options now for this section. If you scroll down you normaly will find the quick add section now with 3 option, none, standard and bulk.

Selecting standard will result in the normal add to cart button. Now you can save the changes and watch the result on your live website!

[AaronFromKB]

Robin. You're a star mate. 

Thank you. 

[mwpplatt]

Thank you, Robin. I have been looking for this for weeks! I have successfully implemented this on Crave 15 😎