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!Buy button
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>
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
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
https://shopify.dev/custom-storefronts/tools/buy-button
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.
Here's the store link: www.passiondepices.com
Thank you!
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.
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.
kalimatusa.com
@Passiondepices, I'm having the same issue. @KetanKumar if you have any suggestions I'd be super grateful!
i can't see any issue if you have issue let me know
yes please share store url
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?
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
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
sorry for any issue can you please share more details or screenshot what do you need?
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?
yes please share store url?
yes please try and modification this code
https://gist.github.com/marioloncarek/93c8aaf2c9e2f29054b70e1c69105ae2
Thanks!
Where i have to put that code? at the bottom part of product-card-grid.liquid ?
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
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?
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>
Thank you very much for this code. However, the display is quite off, see below
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?
thanks for the update yes i can see the same you have updated?
Hi @KetanKumar 👋🏾
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.
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.
@Jasoliya assisted with the lay out now. It looks better now. How do i prevent it from being redirected to the cart ?
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
@andrewodom i have check its already done if any change let me know
I am back my friend. Can you look at https://bullbarnnc.com/collections/livestock-1 . It seems the spacing is not correct. Notice the Concrete J Bunk Feeder "Add To Cart" button is too high? Can you help me fix this @KetanKumar I truly appreciate it.
can you 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 {min-height: 340px;}
@media only screen and (max-width: 749px){
.product-card {min-height: 270px;}
}
FIXED!!!!!! You are the man. Thank you again.
its my pleasure to help
@KetanKumar we are back to the same problem as yesterday. Can you have a look: https://bullbarnnc.com/collections/livestock-1
User | RANK |
---|---|
142 | |
110 | |
79 | |
64 | |
63 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023