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 77 (77)
KetanKumar
Shopify Partner
24919 2496 9029

@FionaLucyD 

Yes, please add this css code

.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
FionaLucyD
Tourist
6 0 5
KetanKumar
Shopify Partner
24919 2496 9029

@FionaLucyD 

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

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

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
24919 2496 9029

@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
24919 2496 9029

@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
24919 2496 9029

@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