Solved

Debut Theme: Add to Cart button on homepage/collection pages

cdanielc
Tourist
16 0 1

Hi,

This question has been raised a few times, but I can't get it up and working (outdated posts?) and I have an additional question regarding the design. 

As I am using Debut theme there is by default no "add to cart" button below the products on the homepage/collection pages. I would like to add an "add to cart" button in the same style as if you would create a Buy button for an external site  (Sales Channels > Buy button > Create a buy button). Please find an image below.

Can anyone help me out? Thanks in advance!

Buy buttonBuy button




Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@cdanielc 

can you please try this 

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>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 113 (113)
KetanKumar
Shopify Partner
36839 3635 11972

@andrewodom i have check its already done if any change let me know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
andrewodom
Tourist
9 0 5

I am back my friend. Can you look at https://bullbarnnc.com/collections/livestock-1 . It seems the spacing is not correct. Notice the Concrete J Bunk Feeder "Add To Cart" button is too high? Can you help me fix this @KetanKumar I truly appreciate it.

KetanKumar
Shopify Partner
36839 3635 11972

@andrewodom 

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.product-card {min-height: 340px;}
@media only screen and (max-width: 749px){
.product-card {min-height: 270px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
andrewodom
Tourist
9 0 5

FIXED!!!!!! You are the man. Thank you again.

KetanKumar
Shopify Partner
36839 3635 11972

@andrewodom 

its my pleasure to help

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
andrewodom
Tourist
9 0 5

@KetanKumar we are back to the same problem as yesterday. Can you have a look:  https://bullbarnnc.com/collections/livestock-1

KetanKumar
Shopify Partner
36839 3635 11972

@andrewodom 

yes ,please update last code

.product-card {min-height: 380px;}
@media only screen and (max-width: 749px){
.product-card {min-height: 270px;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
andrewodom
Tourist
9 0 5

How do you do it man? You worked your magic again!

KetanKumar
Shopify Partner
36839 3635 11972

@andrewodom 

its simple code and its my pleasure to help is 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ramilc
Visitor
2 0 0

Hi!

Hope you can help me with my add to cart button. Please find my requests below:

  • I want to remove the quantity
  • Quantity depends on how many times they click the add to cart button
  • Once clicked, they should remain in my product page and not in add to cart page

Here's my link - https://notjustsweet.com/collections/cancake-classics

Hope you will notice this. Thanks for the help in advance.

 

plantorbit
Visitor
1 0 0

I used your code and it is working very well but I not need it to go directly to the cart. Tell me that how i can do click should not go directly to the cart by clicking on it.

RamezMehio
Tourist
12 0 1

Hello @KetanKumar I see that you've helped people with the same issue I'm facing I tried adding the Add to cart button but it is redirecting to the shop instead of adding to cart. Also the look of it is not tidy can you assist with this?

BG-DK
Visitor
1 0 0

Hi there. I have a problem regarding adding an 'ADD TO CART' button on our website. I have entered the code in the theme snippets so the button is added. But when you click on it the item is not added to the cart - but redirects to the product page.

 

URL: https://gemakker.dk

 

Also I would like for the 'OPTION' button to be alined with the 'ADD TO CART' buttonSkærmbillede 2022-08-21 kl. 20.35.07.png

Jahid-KlinKode
Excursionist
145 1 4

Hi @cdanielc, explore a quick fix for adding an "Add to Cart" button to your Shopify collection pages in this informative YouTube tutorial: https://www.youtube.com/watch?v=s98l1bUZe6k