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.

[DELONG_HUANG]

Thank you! It works after I replace all of the code in the product cart liquid. Initially, I paste at the bottom which is wrong.

---

@Sunny9599 wrote:

1. <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>

   
   <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
   <div class="h5 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate:25 }}</div>
   {% include 'product-price', variant: product %}

   </div>

   <div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
   <form action="/cart/add" method="post">
   {% if product.variants.size == 1 %}
   <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
   <button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit" </div>
   <span id="AddToCartText-{{ section.id }}">
   {% unless current_variant.available %}
   
   {{ 'products.product.add_to_cart' | t }}
   {% endunless %}
   </span>
   {% else %}
   <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>
   <input type="submit" value="See More Options" class="btn product-form__cart-submit" />

   
   
   {% endif %}

   
   
   </form>
   </div>

Here is the code...hope it will help you.

---

[kingsk23]

Thank you! Amazing

[VWright]

I know this thread is old, but I had to say THANK YOU! This was by far the simplest step by step I found. Quick and easy fix!!

[Barrazero]

hello!, I didn't find the product-card-grid.liquid , instead I edited the Product grid Item. liquid and it shows like this: vertically displayed on the left side of the product, I need it below it.

What can I Do? thanks!

[KOL1]

Hi, Thank you. I am however having the issue that the add to cart button brings me to the product page and does not actually add the item to cart. CAn you help? I am using the debut theme and don't have customizations on the page.

[beckyh]

Is there any way to have the add to cart button in the center underneath the product image? At the moment the button is showing on the left and quite far down 

[rvlmotion]

Good morning, 

Firstly congrats on this code, the functionality is working perfectly on my store. 

Unfortunately, I've found 2 issues:

1st Issue: The quantity box isn't resizing automatically and is too big. If possible would be better to have this box as is showing on the product page (image below).

2nd Issue: This ADD TO CART button is the only thing that's not being translated from the Translation Lab App that I'm currently using to translate my whole store (amazing free translation app by the way). 

The Developer of the Translation Lab team send me this feedback: 

Regarding the "Add to cart" button I could not proceed to fix that so you should contact theme developers regarding that. You can tell them that the "Add to cart" text is translated in our app:

But it seems that the translation is overwritten by a javascript code coming from the theme.


Please, let me know if you have a workaround to solve those issues

Kindly regards 

Tiago Moreira

[Smokelab]

Is it possible to have a add-to-cart button which does not redirect to the cart? Currently using Debut theme.

[AmbayaGold]

Yes! That worked great! So where do I edit the code to center the buttons and change the shape, color etc? 

[Jennifer_A]

This code worked but when you actually click on the add to cart button it goes to an error page. Why is it not working correctly?

[MRamzan]

If you are using Dawn theme then try this:

<!--  cart button on collection page :: starts -->

<style>
  .collection-cart-btn {
    display: none;
  }
  .collection-grid-section .collection-cart-btn {
    display: block;
  }
</style>
<form method="post" action="/cart/add" class="collection-cart-btn">
  <input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" />
  <input type="submit" value="Add to cart" class="button" style="margin-top: 17px; width: 100%;" />
</form>

<!--  cart button on collection page :: ends --> 

Or try this:

<!--  cart button on collection page :: starts -->

<style>
  .collection-cart-btn {
    display: none;
  }
  .collection-grid-section .collection-cart-btn {
    display: block;
  }
</style>
<form method="post" action="/cart/add" class="collection-cart-btn">
  <input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
  <input type="submit" value="Add to cart" class="button" style="margin-top: 17px; width: 100%;" />
</form>

<!--  cart button on collection page :: ends --> 

I hope it will solve your issue. If still face issue then please reply here, I will help you out.

Thanks.

[Jesper20]

Hi. Have anybody else experienced that this button for some reason display differently on some devices? I have added this piece of code for add to cart buttons on collection pages for 2 stores now, and same thing for both of them. Nothing wrong with CSS, but on some mobile devices, I have experienced that these buttons display incorrectly. See screenshots. Anybody else with this issue?

[oscprofessional]

Hi @Jesper20 ,

I am able to see the screenshot due to file type issue.

Can you share again ?

share me the url please..

[Jesper20]

Hi @oscprofessional ,

Thanks for your reply!
Here is the url to see all 4 screenshots: https://postimg.cc/gallery/8L1bGnt (don't worry, no virus).

[oscprofessional]

@Jesper20 ,

Share the both url pages where it is correct and incorrect.

[Jesper20]

@oscprofessional 
https://cbd24.dk/collections/cbd-olie the other one is still being developed and pw protected, but same problem and same code I used for the atc button

[oscprofessional]

@Jesper20 ,

Share me the incorrected act page url, with password.

[Jesper20]

@oscprofessional the one is sent above is incorrect

[oscprofessional]

@Jesper20 ,

Check this screenshot.

As you have defined that this is correct button design.

[Jesper20]

@oscprofessional yes that is correct. But when you check it on some mobile devices, they will display differently for some weird reason. Have you checked the url on mobile (no mobile through inspect, but actual mobile)?

[oscprofessional]

@Jesper20 

[Jesper20]

@oscprofessional It has to be checked through an actual mobile, not through inspect

[oscprofessional]

@Jesper20 ,

I have checked in my mobile.

[Jesper20]

@oscprofessional okay thanks. That's the thing, it's only on some devices and on yours it shows correctly.

The other one is https://nordicoil-us.myshopify.com/ pw: geucra

[oscprofessional]

@Jesper20 ,

You want these buttons like green backround?

[Jesper20]

@oscprofessional no. 

Here is how they should be displayed on all devices:

How it displays on some devices for some reason:

[oscprofessional]

@Jesper20 ,

.slider-mobile-gutter .card__information {
    height: 71px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

[Jesper20]

@oscprofessional added it to base.css since we are on Dawn theme, but didn't change anything. Do you think it's something to do with the height?

[oscprofessional]

@Jesper20 

you have changed the password?

[Jesper20]

@oscprofessional I fixed the button on that site myself. Only the atc button on CBD24.dk still not working.

[oscprofessional]

@Jesper20 ,

share the page URL 

[oscprofessional]

@Jesper20 

I have checked in 2 to 3 mobile devices actually. I did not found issue .

Sorry!

Tell me the issue now! 

[Jesper20]

@oscprofessional 
Store: https://cbd24.dk/

Here is the issue again:

[oscprofessional]

@Jesper20 ,

On which device its is arising ?

[Audreykhk]

There is no "product-card-grid.liquid" under snippet for Crave theme. are there any alternatives?

[mats25]

How do i change the code to stay on the collection page after the product is added to the cart?! Now its sending the visitor to the cart page...

[MRamzan]

For this you will have to got to customize and then select theme settings and go to cart. there will be a dropdown to select where you want to go after add to cart button click. If you still not able to solve then you can connect me. I will help you. Thanks.

[ogeid]

Is there a way to skip the cart and go directly to the checkout?

[KabirDev]

It's an old solution. Most the modern themes have this feature built in. You can watch this video https://www.youtube.com/watch?v=s98l1bUZe6k to turn on add to cart in your collection pages.

[Alenhook2023]

How to edit this code to made the add to cart change to sold out when the stock is 0 ?

[MEEShops]

Hi, I followed your instructions and it works perfect. However the placement of the Add to Cart button sits on top of the product under it. I've posted an image of my page for reference. I tried moving the code up and that did work for placement, but it also stopped the add to cart feature from working.  Any suggestion for fixing the placement by adding space?

[API2]

This code has been working perfectly for Dawn theme for a long time.

I have updated Dawn to latest version 15.0.0. and this code doesn't work for it (I tried to put the same code to card-product.liquid)

Is there any update of this piece of code ?

Thank you in advance.

[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? 

[artisan-meats]

Hi @rosewilkmu , we ended up using this solution to stay on the same page: https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...

It works well and is a nice user experience too! 

[WerkingForce]

Glad to hear you got it. Had the same issue

[rosewilkmu]

Great thank you ! 

[KritikaSingh]

Hi!

I ended up doing like you said, and it all works except the quantity selector. Upon clicking it, it takes me to the product page and asks me to select the quantity from there, I'm unable to increase quantity from the collections page itself. 

Please do help me

[souravroy]

Hey!

Brooklyn them: I have added the ATC button on my collections page, but I failed to stop it from redirecting it to the cart.

Any help in coding would be appreciated.

Thanks.

[DemetriusM]

THANKYOU SO MUCH MAN !! been 3 days and you saved me another day thank u!!