Can I have the Add to Cart button show on search engine results page, Dawn theme

Technical Q&A
1

Hello,

I would like the search results page to have an Add to Cart button under each item. All of my collections have the Add to Cart button enabled but if I search and do not select a collection there is no Add to Cart button.

Any help is appreciated.

2

@joanyeb This is expected behavior in most Shopify themes the search results template is separate from collection templates, so the “Add to cart” setting doesn’t automatically apply there.

What usually fixes it:

The theme needs to support Add to Cart on search results (many don’t by default).

You’ll need to edit the search results template/section and add a product form (same logic used in collection cards).

Some themes expose this as a hidden setting; others require a small Liquid change.

There isn’t a native Shopify toggle for this, it’s theme-level functionality.

Which theme are you using?

3

Hey @joanyeb!

Thanks for posting your Query here. We community members are willing to help you with your any request.

Can you please share your store url and password [if applicable] so that I can take a look into it and provide you the solution code.

5

I am using Dawn theme. Could you advise me on how I could add the Add to Cart button?

7

This is a theme limitation, not a collection setting.

Your search results template doesn’t include the product form / Add to Cart button. You’ll need to edit your theme (e.g. main-search.liquid or search.json) and add the same product card code used in collections, or enable it in Theme Settings → Product cards if your theme supports it.

8

Thank you for the information. Unfortunately, I have not been able to modify the product-card in main-search.liquid to show the Add to Cart button. Below is from main-search.liquid and I think the modification should be in the {% render ‘card-product’ area?

<div class="loading-overlay gradient"></div>
              <ul
                class="grid product-grid  grid--{{ section.settings.columns_mobile }}-col-tablet-down
                grid--{{ section.settings.columns_desktop }}-col-desktop"
                role="list"
              >
                {%- assign skip_card_product_styles = false -%}
                {%- for item in search.results -%}
                  {% assign lazy_load = false %}
                  {%- if forloop.index > 2 -%}
                    {%- assign lazy_load = true -%}
                  {%- endif -%}

                  <li
                    class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                    {% if settings.animations_reveal_on_scroll %}
                      data-cascade
                    {% 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,
                          skip_styles: skip_card_product_styles,                                                                                         
                        %}
                        {%- assign skip_card_product_styles = true -%}

The same area in main-collection-product-grid.liquid is almost identical, as seen below:

 <div class="loading-overlay gradient"></div>
            <ul
              id="product-grid"
              data-id="{{ section.id }}"
              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 %}
              "
            >
              {% assign skip_card_product_styles = false %}
              {%- for product in collection.products -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}
                <li
                  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                    data-cascade
                    style="--animation-order: {{ forloop.index }};"
                  {% endif %}
                >
                  {% render 'card-product',
                    card_product: product,
                    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,
                    skip_styles: skip_card_product_styles,
                    quick_add: section.settings.quick_add,
                    section_id: section.id
                  %}
                </li>
                {%- assign skip_card_product_styles = true -%}

The 2 differences being card_product: item in the main-search.liquid file vs.card_product: product in main-collection-product-grid.liquid and the additional lines quick_add: section.settings.quick_add, section_id: section.id in main-collection-product-grid.liquid.

Please help

9

No one can help solve this?