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

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
36927 3642 11995

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)
rhinoquinn
New Member
5 0 0

Hi @KetanKumar I read through this forum and followed your steps, adding code to show ATC button to my Collection pages. It worked brilliantly!

But I would love help with two more related things:
1. on Collection pages (not Product pages) I would prefer no Qty Selector. I just want the atc button alone please.
2. How do I change the styling of the button to match how it shows on Product pages? (rounded edges).

Please see attached snips for reference...

Screenshot 2024-02-12 at 9.58.57 PM.png
Screenshot 2024-02-12 at 10.02.16 PM.png

 

Site is not live yet. https://junglestory.myshopify.com/
Password: chiabe

 

Many thanks in advance! 🙂

schwaberin
Visitor
1 0 1

Hello, 

I have also added this code but it doesn't seem to be aligning my add to cart buttons. Currently, the buttons are not aligned because my product titles are different lengths and some take up more lines than others. Could you please help me align my buttons? My site is schwabies.myshopify.com. I appreciate your help.

Thank you, 

Erin

KetanKumar
Shopify Partner
36927 3642 11995

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

can you share the code? @KetanKumar 

KetanKumar
Shopify Partner
36927 3642 11995

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

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
36927 3642 11995

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

Hi, can you share how did you do this?

 

ginnyst
Tourist
7 0 3

Hello there, I have done this, but on mobile, i have very weird spacing on my buttons. (see photo) Can you advise how to correct that?

 

Thanks

KetanKumar
Shopify Partner
36927 3642 11995

@ginnyst 

sorry for this issue 'bt  i can't see any photos also 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
ginnyst
Tourist
7 0 3
It is on mobile - ginnystlawrenceart.com thank you!
KetanKumar
Shopify Partner
36927 3642 11995

@ginnyst 

sorry i can't see your attachment bt can you please try this code

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

@media only screen and (max-width: 749px) {
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {font-size: 12px;}
}

 

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
ginnyst
Tourist
7 0 3
Hi that didn't work unfortunately. If you go to my homescreen on mobile -
ginnystlawrenceart.com you will see all the "add to cart" buttons I
manually added.

When you look at the "view all" it is smudged up against all the other add
to cart buttons, but only on mobile
ginnyst
Tourist
7 0 3

Here is what I am referring to. 

KetanKumar
Shopify Partner
36927 3642 11995

@ginnyst 

do you have like this?

KetanKumar_0-1623392335020.png

 

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

Hi there, I'm hoping you can help me with a similar issue. I've followed your instructions to add the cart button, but the buttons are laying right on top of the next row like pictured. Could you help with this? Jacob University Store password: awtsoh

 

Screenshot 2021-06-17 165226.png

KetanKumar
Shopify Partner
36927 3642 11995

@tjacobofficial 

sorry for that issue can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.product-card {margin-bottom: 10px;}
.product-card+form {margin-bottom: 30px;}
.product-card+form input {width: 100%;}

 

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

Wonderful, that's perfect! Thank you so much!

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 

mariavii
Tourist
4 0 1

Hi! I saw that you helped lot of people here. Could you please help me also, I want to have a "buy it now" button under the products on the home page and collection pages. 

Here's my url www.alofiepets.com 

Thanks 

 

KetanKumar
Shopify Partner
36927 3642 11995

https://shopify.dev/custom-storefronts/tools/buy-button

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

Hello @KetanKumar 

Thank you for this solution. It worked perfectly.

Is there any way that we can make the "Add to Cart" button not navigate away from the collections page and/or homepage?

For both mobile and desktop please. When we add from the product page, the user stays on the page and gets the "added to cart" notification as per below pic. We would like to keep it this way to reduce the number of clicks when people are browsing a collection and selecting multiple products to add.

Screen Shot 2021-09-21 at 2.09.49 PM.png

 

Here's the store link: www.passiondepices.com

Thank you!

Kalimatusa
Tourist
3 0 4

Thank you @Passiondepices for bringing this up. I am having the same problem. Please let know if you this solved. Also, I would appreciate @KetanKumar if he can help.

KetanKumar
Shopify Partner
36927 3642 11995

@Kalimatusa 

Sorry for facing this issue, it's my pleasure to help us.

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

Please share your site URL,
So I will check and provide 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
Kalimatusa
Tourist
3 0 4

kalimatusa.com

epictofu
Visitor
2 0 1

 @PassiondepicesI'm having the same issue. @KetanKumar if you have any suggestions I'd be super grateful!

KetanKumar
Shopify Partner
36927 3642 11995

@Kalimatusa 

i can't see any issue if you have issue let me know 

@epictofu 

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

The issue still there. When you add to cart, it navigates you to the cart page. Is it possible to add to cart without leaving the page we are in and continue shopping?

epictofu
Visitor
2 0 1

Thank you, my store url is epictofu.com

The Add to cart button is working well. However, when clicked, it takes the shopper to their cart. I'd like for them to stay on their current page.

 

Thanks so much,

 

Jenn

KetanKumar
Shopify Partner
36927 3642 11995

@epictofu 

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

Hello @KetanKumar ! I am hoping that you can help me. We are using the DEBUT theme, and cannot add the Add To Cart button to the individual product pages. We do not want it in the homepage or in the collection, just in the individual product pages. Is there any way to do this? Thank you so much for your help in advance. Our shop is www.calquepress.com  

KetanKumar
Shopify Partner
36927 3642 11995

@James_Womack 

sorry for any issue can you please share more details or screenshot what do you need?

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
cabecitadenovia
Tourist
4 0 1

I'm having the same issue.

Is there any posibility to change the action and add the productos to the cart drawer insted of going to cart page?

KetanKumar
Shopify Partner
36927 3642 11995

@cabecitadenovia 

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
cabecitadenovia
Tourist
4 0 1
KetanKumar
Shopify Partner
36927 3642 11995

@cabecitadenovia 

yes please try and modification this code

https://gist.github.com/marioloncarek/93c8aaf2c9e2f29054b70e1c69105ae2

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
cabecitadenovia
Tourist
4 0 1

Thanks!

Where i have to put that code? at the bottom part of product-card-grid.liquid ?

chrisr408
Tourist
9 0 36

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

lymie
Visitor
2 0 1

Hello Ketan, 

Thank you so much for your input. I have followed your instructions and I have successfully implemented the add to cart button under the featured product on my homepage. However, I have not been able to code the variant selector. 

My website is www.foodslicerpro.com

Can you please help?

KetanKumar
Shopify Partner
36927 3642 11995

@lymie 

add this code also

 <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>     
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
    </select> 
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
lymie
Visitor
2 0 1

@KetanKumar 

Thank you very much for this code. However, the display is quite off, see below 

Screenshot 2021-10-21 at 04.42.05.png

This is how I have integrated the codes : 

<form method="post" action="/cart/add">
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
<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>

 

Is there any way to display the variant selector, the quantity and the add to cart button on the same level please?

KetanKumar
Shopify Partner
36927 3642 11995

@lymie 

thanks for the update yes i can see the same you have updated? 

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

Hi @KetanKumar 👋🏾

 

  • Is it possible to make the Collection Add To Cart button ajax, so it behaves the same as the Add To Cart button on the product page? (where clicking the button adds product to cart, triggers cart pop-down notification, and doesn't take the visitor to a new page)
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
36927 3642 11995

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

andrewodom
Tourist
9 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