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

[cdanielc]

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 button

[KetanKumar]

@schwaberin 

yes, please 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__title {
min-height: 50px;
    display: inline-block;
}

[Shishabuzz]

Hi there.

Your code worked 🙂 But how do i make the ADD TO CART button on collection page smaller and neater? Also how do i change it so the client does not get directed to checkout page straight away. It must just get added to cart then when client is ready he can view CART.

[KetanKumar]

@Shishabuzz 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Shishabuzz]

https://shishabuzz.shop/collections/al-fakher

[Shishabuzz]

@Jasoliya assisted with the lay out now. It looks better now. How do i prevent it from being redirected to the cart ?

[qaiser1]

Hi, can you share how did you do this?

[qaiser1]

can you share the code? @KetanKumar 

[KetanKumar]

@qaiser1 

do you have try

https://community.shopify.com/c/shopify-design/narrative-theme-add-to-cart-on-collection-template/td...

[pinkdiva22]

Hi,

Is there a way to get the add to cart button and quantity to be inactive when the product is sold out?

[KetanKumar]

@pinkdiva22 

yes, please sent  store url?

[pinkdiva22]

Hey, can you explain how to make the quantity area bigger on mobile view - the add to cart is ok but we cant see the numbers 

[pinkdiva22]

thank you https://www.glitterbelsaustralia.com.au/collections/glitter

[KetanKumar]

@pinkdiva22 

can you please show me issue images

[chrisr408]

Hi KetanKumar,

I've got the add to cart buttons working on my collection pages in Debut theme.

I also am trying to get the cart drawer to be activated when adding to cart from a collection page rather than directed to the shopping cart.

I'm not good at coding, so I'm unsure what to do... Do you take all of the code from that github post and copy it where??? thanks

[qaiser1]

hi ketan, man you are really doing a great job here. helping people. can you help me in the below issue. I have added add to cart button on my homepage and collection pages but its alignment is not right. can you let me know what is the code and where should i put to make it right. so, they all look at the same heidht/width. 

[RamezMehio]

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?

[qaiser1]

@KetanKumar can you help me with this?

[Shishabuzz]

##- Hi there. Download an app on your apps page called BUY ME - STICKY BUY BUTTON and follow their steps to do so. Its super easy and there is a LIVE chat support available if you have any questions. -##

[KetanKumar]

@qaiser1 @RamezMehio 

yes, please share store url

[andrewodom]

First of all, THANK YOU for your continued help to the community. It is so appreciated. That said, I am hoping you can help me. I run www.bullbarnnc.com on the Debut theme. I have successfully added the ADD TO CART button. I would like to do two things though that I simply cannot get coding to work for. 

1) Can you help me get the ADD TO CART button to be to the right of the number box (which would make the number box a bit shorter)?

2) Can you help me get the ADD TO CART button spaced correctly on every product line after the first? Right now it sits on top of the image beneath it. 

I truly appreciate it @KetanKumar