Add "add to cart" button onto search results page

New Member
3 0 0

I am seeking an easy code to input into search.liquid that will generate an "add to cart" feature when a customer searches for a particular item. 

 

We have thousands upon thousands of items in our store and believe this would make it easy for one to search for "galaxy s7", view our results and choose to add an item to their cart without having to click on the product link.

 

Thanks in advance!

0 Likes
New Member
3 0 0

Hello, did you figure out how to do that? 

 

I'm trying to with no luck..

0 Likes
New Member
1 0 0

Hey Sarah,

you need to take the cart/add form function from the product-template.liquid and save it as a snippet (eg. add-to-cart.liquid) to use elsewhere.

<div class="product-template__container page-width"
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}">

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  
  {% capture "form_classes" -%}
  product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
  {%- endcapture %}

  {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}

    <form class="addtocart" method="post" action="/cart/add" >
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input type="submit" name="add" value="Add to cart" class="btn btn--secondary-accent" data-add-to-cart/>
    </form>
  {% endform %}
</div>

then include the snippet in your product-card-list.liquid

    {% include 'add-to-cart' %}
0 Likes