Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
can you please try this
Just follow the steps for Debut theme for Add to cart button on collection pages.
<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>
This is an accepted solution.
can you please try this
Just follow the steps for Debut theme for Add to cart button on collection pages.
<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>
Hello. I also have problem with no “add cart” button, I didn’t notice it at first, but when after editing my shipping and delivery that’s the time I notice that there is no add cart. I’m using minimal theme. Thank you
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.
Hi @KetanKumar , I noticed you managed to help some other Shopify store owners with this issue. I'm facing the same issue now trying to align my Add to cart buttons on my collection page.
1. I'd like to make it so the Add to Cart button is in line with the Quantity.
2. I'd like to fix the height o the Product title so that the Quantity and Add to cart line will be aligned.
Would appreciate your help with this. Thank you!
Kristyn
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.
is this fine look?
Hi @KetanKumar
Yes that looks better! But can the Product Title be in line with the picture and the Quantity line?
Thanks!
yes, please add this code
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 + form {
display: flex;
justify-content: space-between;
}
.product-card + form input {
width: 70%;
}
.product-card + form input#quantity {
width: 25%;
}
Hi @KetanKumar, I applied it and waited for a while but it still doesn't seem to be working?
oh, what's an issue can you please us after add above code
Hi @KetanKumar , I've added the above code as follows but the edits are not appearing on my collection page: https://skynsin.com/collections/single-sheet-mask
Grateful for your assistance! Thanks.
HI @KetanKumar how are you. notice you helped other users that have similar problem than me. I was able to put the add to cart button buy I would like to put it besides the box to inlcude quantity, not below. Please do you know how to do this? my website is https://carnavalmayorista.myshopify.com/ password for now is mayorista Also just if you know, can I remove the box were it says "oferta" (sale in spanish)??? Thanks so much!
Sorry you are facing this issue, it would be my pleasure to help you.
i can't see now do you have fix?
HI, hope you a re doing good.
I was able to remove the sale box, but still cannot find how to put the Add to cart box besides the qty box in colecction page and in product page also. I use debut theme. https://carnavalmayorista.myshopify.com/ password mayorista
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
.grid__item--collection-template form {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.grid__item--collection-template form input#quantity {
width: 70px;
}
Thank you so much!!! worked for collection page. Just if you can, could you help with same thing but in product page? So that add to cart box appear besides qty box!! Thanks so much!
thanks
i have update my color collection page proper code so can you please update
also if you need same as product page it can be done some customization code
Hey i was wondering if you could help me too.
I have added in thr add to cart button on my best sellers collection on the homepage but its not aligned
Its also not going to cart just an invalid page can you help me too?
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.
thanks for store URL, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.product-card__title {min-height: 50px;isplay: inline-block;}
oh wow
thanks so much
Any idea how to fix the add to cart so it goes to the cart page and not an error?
also can we straighten the add to cart button?
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.
sorry but you have add wrong code please add this code
<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>
Thank you so much
I have done that now
Is it possible to move the view all button down?
and line up hte add to cart buttons - it looks quite messy on mobile
Yes, please add this css code
.product-card__title {
min-height: 50px;
display: inline-block;
}
where does it go?
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
Hi,
Is there a way to get this button inactive when the product is sold out?
Thanks in Advance.
Hello @KetanKumar
I followed your customized code which you give about homepage add to cart button code. It worked very well but on mobile, the button is doesn't look very well. I want to resize add to cart button as a thinner.
URL: onthologie.com
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.
On Desktop add to cart buttons are ok but on mobile look big. I want smaller or maybe thinner
can you please confirm this look
I like the add to cart section like that but is there any way to remove quantity? @KetanKumar
Hi @KetanKumar
I have been trying to find some solutions but couldn't find any. Would you help me, please?
Hi,
Is there a way to get the add to cart button and quantity to be inactive when the product is sold out?
yes, please sent store url?
can you please show me issue images
Hello,
I want to REMOVE the add to cart button from my collections and homepage. I want the button to appear only on each product page. Ive searched for the answer and couldnt find the solution please help
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.
thanks for URL
can you 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.
.product-card form {
display: none;
}
It worked! Finally! been going at it for 10 days! Thank you!
its my pleasure to help us
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024