FROM CACHE - en_header

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

Solved
Lovelyn12
Excursionist
39 1 4

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.

Screenshot 2019-08-06 10.27.25.pngScreenshot 2019-08-06 10.27.36.png

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
12094 1877 2406

This is an 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>


Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 101 (101)
oscprofessional
Shopify Partner
12094 1877 2406

This is an 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>


Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Lovelyn12
Excursionist
39 1 4

Hello Pallavi,

 

I already have that code on my product-card.grid. But nothing changes. Please see attached photo.Screenshot 2019-08-06 15.50.17.png

Lovelyn12
Excursionist
39 1 4

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.

Screenshot 2019-08-06 15.56.30.pngScreenshot 2019-08-06 15.56.41.png

oscprofessional
Shopify Partner
12094 1877 2406

Hello ,

Can you please share URL link of store.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Lovelyn12
Excursionist
39 1 4
oscprofessional
Shopify Partner
12094 1877 2406

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.

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Lovelyn12
Excursionist
39 1 4


<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
Excursionist
39 1 4

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
Shopify Partner
12094 1877 2406

Shopify Screens.jpg

 

Hello ,
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.

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Lovelyn12
Excursionist
39 1 4

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

KeelyD
New Member
2 0 13

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
Excursionist
15 0 4
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
Shopify Partner
12094 1877 2406

You are working on debut theme?

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
harshillllllll
Excursionist
15 0 4
Alistair6
Tourist
3 0 2

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

KRaatz
Tourist
8 0 4

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
Tourist
3 0 2

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
Tourist
10 0 14

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
Tourist
4 0 7

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?