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

Solved
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




Replies 108 (108)
KetanKumar
Shopify Partner
32502 3268 10844

@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;
}

 

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

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
Shopify Partner
32502 3268 10844

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

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

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

qaiser1
Tourist
5 0 1

Hi, can you share how did you do this?

 

qaiser1
Tourist
5 0 1
KetanKumar
Shopify Partner
32502 3268 10844

@qaiser1 

do you have try

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

 

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

Hi,

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

 

KetanKumar
Shopify Partner
32502 3268 10844

@pinkdiva22 

yes, please sent  store url?

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

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 

KetanKumar
Shopify Partner
32502 3268 10844

@pinkdiva22 

can you please show me issue images

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
chrisr408
Tourist
9 0 9

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

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. 

 

 

Capture.jpg

RamezMehio
New Member
1 0 0

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

@KetanKumar can you help me with this?

 

Shishabuzz
Tourist
4 0 3
##- 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
Shopify Partner
32502 3268 10844

@qaiser1 @RamezMehio 

yes, please share store url

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

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 

 

Screen Shot 2022-05-18 at 4.01.34 PM.jpg