Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

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)

oscprofessional
Shopify Partner
16116 2410 3126

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>


Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 112 (112)
DELONG_HUANG
Excursionist
51 0 8

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

Thank you! Amazing

VWright
Visitor
1 0 0

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
Visitor
1 0 1

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!

Captura de Pantalla 2021-05-14 a la(s) 21.40.58.png

KOL1
Tourist
5 0 2

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
Excursionist
10 0 3

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

Good morning, 

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

 

Unfortunately, I've found 2 issues:

rvlmotion_1-1624023642283.png


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

rvlmotion_3-1624023908524.png

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:

rvlmotion_0-1624023066434.pngrvlmotion_1-1624023074664.png

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
Excursionist
14 0 5

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

AmbayaGold
Tourist
4 0 6

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

Jennifer_A
New Member
5 0 0

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
Shopify Partner
392 3 36

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.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
Jesper20
Shopify Partner
29 1 4

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
Shopify Partner
16116 2410 3126

Hi @Jesper20 ,

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

Can you share again ?

share me the url please..

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

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
Shopify Partner
16116 2410 3126

@Jesper20 ,

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

@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
Shopify Partner
16116 2410 3126

@Jesper20 ,

Share me the incorrected act page url, with password.

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

@oscprofessional the one is sent above is incorrect

oscprofessional
Shopify Partner
16116 2410 3126

@Jesper20 ,

Check this screenshot.

As you have defined that this is correct button design.

oscprofessional_0-1649922379086.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

@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
Shopify Partner
16116 2410 3126

@Jesper20 

oscprofessional_0-1649922580563.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

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

oscprofessional
Shopify Partner
16116 2410 3126

@Jesper20 ,

I have checked in my mobile.

oscprofessional_0-1649923390323.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

@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
Shopify Partner
16116 2410 3126

@Jesper20 ,

You want these buttons like green backround?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

@oscprofessional no. 

Here is how they should be displayed on all devices:

Correct 1.png

 

How it displays on some devices for some reason:

 

Wrong 1.jpeg

oscprofessional
Shopify Partner
16116 2410 3126

@Jesper20 ,

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

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

@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
Shopify Partner
16116 2410 3126

@Jesper20 

you have changed the password?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

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

oscprofessional
Shopify Partner
16116 2410 3126

@Jesper20 ,

share the page URL 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
oscprofessional
Shopify Partner
16116 2410 3126

@Jesper20 

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

Sorry!

Tell me the issue now! 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Jesper20
Shopify Partner
29 1 4

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

Here is the issue again:

 

Correct 2.pngWrong 2.jpg

oscprofessional
Shopify Partner
16116 2410 3126

@Jesper20 ,

 

On which device its is arising ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Audreykhk
Visitor
1 0 0

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

mats25
Visitor
1 0 1

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
Shopify Partner
392 3 36

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.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
ogeid
Shopify Partner
68 0 23

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

D.E.W. L.A. - Web Design
https://dew.la
KabirDev
Shopify Partner
248 61 73

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.

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
Alenhook2023
Visitor
3 0 0

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

MEEShops
Visitor
1 0 0

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?

 

MEEShops_0-1716596106760.png

 

API2
Visitor
2 0 0

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

artisan-meats
Tourist
10 0 14

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

Glad to hear you got it. Had the same issue

rosewilkmu
Tourist
4 0 7

Great thank you ! 

KritikaSingh
Excursionist
22 0 2

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
Excursionist
31 0 6

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
Visitor
1 0 0

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