How to add "add to cart" button on my collection page

[Lovelyn12]

Hello everyone, I am currently using debut theme. How to add "add to cart" button on my collection pages. And I want to show % discount every product on my collection page. Thank you in advance.

Please see attached file.

[oscprofessional · Accepted solution]

Hello Lovelyn12,

Just follow the steps for Debut theme for Add to cart button on collection pages.

• From Shopify Admin select Online Store and click on Themes
• Choose your main theme
• Click the . . . on the top left-right (see below) and hit Edit code
• Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.
  

  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input min="1" type="number" id="quantity" name="quantity" value="1"/>
    <input type="submit" value="Add to cart" class="btn" />
  </form>

  
  
  

[Lovelyn12]

Hello Pallavi,

I already have that code on my product-card.grid. But nothing changes. Please see attached photo.

[Lovelyn12]

If I add the code, the add to cart button is not on the proper place. and I want to ut it on every product on the collection page.

[oscprofessional]

Hello Lovelyn12,

Can you please share URL link of store.

[Lovelyn12]

www.boutq.com

Thank you so much.

[oscprofessional]

Can you please paste the code of your product-card-grid.liquid code. 

I think you might have customized the file due to which its  not working acc to the default theme.

[Lovelyn12]

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">

<span class="visually-hidden">{{ product.title }}</span>
</a>

{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}

<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="">
</div>
</div>

<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>

<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

{% include 'product-price', variant: product %}

</div>

[Lovelyn12]

When I paste the code at the bottom part. the add to cart button will be placed on the button part of the collection page.

[oscprofessional]

Hello Lovelyn12,
I checked yours code for my store and it is working properly on my store debut theme.
Might be you have done some  customization in collection page because for this your collection page not showing Button properly.

[Lovelyn12]

Really? Huhu Is there other way I can fix it? I don't know how I am not a coding expert. 

[KeelyD]

Is there a way to have it add to cart but not redirect the page to the cart when they submit? So that they can rapidly add a few products to the cart.

Thanks in advance!

[harshillllllll]

I’m facing the same issue and still not able to add it, I get the button but nothing works. And it’s redirecting to product page. Please help.

[oscprofessional]

You are working on debut theme?

[harshillllllll]

yess

[Alistair6]

Looking to solve the same issue? Is there a generic code for this?

[KRaatz]

Hi @oscprofessional 

Thank you for the code. It worked well on the Venture theme.

when i used the added code it redirects me into the product page.

How do i stop this from happening?

Thanks in advance

[EdvardSR]

Same here - but I managed to get it working in the past - then some update has "broken" it - now it redirects to the product, and user needs to add to basket again.

[artisan-meats]

We've fixed this as of March 28th, 2020. You need to add a few more tags to align and space the quantity picker and button correctly. Note: this works with the Brooklyn theme.

This code should be inserted in the middle of the product-grid-item.liquid Snippet file. We inserted it at line 82, before this code:

<a href="{{ product.url | within: collection }}" class="grid-product__meta">

Inserted code:

{% comment %}
    Next bit of code has been added to include "Add to Cart" button below every product in a grid, with the quantity displayed
    {% endcomment %}
    
	<form method="post" action="/cart/add">
		<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      	<br />
 		<center><input min="1" type="number" id="quantity" name="quantity" value="1"/></center>
		<input type="submit" value="Add to cart" class="btn" />
	</form>

Let me know if this works.

[rosewilkmu]

Hey @artisan-meats I tried this out but it goes straight to the cart page rather than adding it! Any chance you could help with this?