Insert 'Add to cart' Button on Search Results

Solved

Insert 'Add to cart' Button on Search Results

JourneysMade
Visitor
2 0 1

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. 

 

JourneysMade_0-1666866637032.png

 

JourneysMade_1-1666866683552.png

 

 

Accepted Solution (1)

Litos
Globetrotter
688 169 147

This is an accepted solution.

Hi @JourneysMade,

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

- Step 1: Please add code here:

Screenshot.png

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:

Screenshot.png

Code:

show_quick_add: true,

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 12 (12)

Litos
Globetrotter
688 169 147

This is an accepted solution.

Hi @JourneysMade,

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

- Step 1: Please add code here:

Screenshot.png

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:

Screenshot.png

Code:

show_quick_add: true,

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
JourneysMade
Visitor
2 0 1

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

Victor-Joey
Visitor
1 0 0

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

Raxsoller
Tourist
8 0 1

Where can I put the code on Kalles Theme? thanks

StarSparky
Not applicable
2 0 0

Hello sir,

 

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

Summer
Shopify Staff
1382 322 238

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.

Summer | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

StarSparky
Not applicable
2 0 0

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
Shopify Staff
2503 456 416

Hey @StarSparky.

 

Thanks for the quick response. 

 

I would suggest the following third-party applications: 

 

 

Let us know what you think.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Robin95
Tourist
4 0 2

Hi @StarSparky.

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

Helping Shopify users to improve there store.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Robin95
Tourist
4 0 2

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:

Robin95_1-1720947225304.png

 

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

 

Robin95_2-1720947404660.png

 

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

Robin95_3-1720947658806.png

 

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:

Robin95_4-1720947871775.png

 

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:

 

 

Robin95_5-1720948132281.png

 

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!

 

Robin95_6-1720948360048.png

 

 

Helping Shopify users to improve there store.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
AaronFromKB
Visitor
1 0 0

Robin. You're a star mate. 

Thank you. 

mwpplatt
Visitor
2 0 0

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