Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi! I've been looking on tutorials on how to place an add to cart-button on the collection page. Everything looks right, but it isn't working properly when pushing the button.
This is the code I've been using:
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>
Here are some printscreens to show you how it looks and the problem. Maybe someone can help me.
Solved! Go to the solution
This is an accepted solution.
Replace
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
with this
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
This is an accepted solution.
Check out this video Guide.
Hello , @VictorVaissier
Replace
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
with this
<input type="hidden" name="id" value="{{ product.first_available_variant.id }}" />
Hi IttantaTech!
Thanks for helping me,
the new code still gives me the same error as in the printscreen
Can you please provide your store URL ?
This dawn-version is just in preview mode atm. We're using a different theme right now. Don't want to go live with this one right now. Is there another way?
You can share preview link of that theme.
Go to theme -> click on actions button -> right click on preview -> then click copy link address.
Like this:-
This is an accepted solution.
Replace
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
with this
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
Works like a charm!
Thank you so much!
Hi there!
I'm also using Dawn and getting the same error message. I followed the steps in this thread but would like to know how it was solved on your end!
I'd also like to know how to style this according to the theme, please! Thanks!
hi @IttantaTech ,
I follow you update and solution but,
is it possible to make the btn/button follow the dawn theme style, because when I setup it looks very default.
Hi @GoDrinks-Bali! This is also something we're looking in to. Please contact me if you find a solution to this before @IttantaTech answers!
Best regards,
VictorVaissier
This is an accepted solution.
Check out this video Guide.
Thanks (^0^)
now I might just edit the margins or padding to fit right in the middle. Or can I use code center?
Try this guys:
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input type="hidden" min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="button"
style="margin-top:10px;
margin-left:25%;
margin-right:25%;
border-radius:20px;
"/>
</form>
how can I add variation before add to cart button?
Wondering the same! Commenting in case someone finds a solution.
Check out the Updated Video.
https://www.youtube.com/watch?v=5uzyReIlKOs
#hi, agree it needs Variations to be perfect, and if the item is out of stock to make the button not available or state out of stock and be not clickable. - currently it allows it to add to the basket even tho its out of stock. not ideal!
all help appreciated
https://www.youtube.com/watch?v=5uzyReIlKOs
Please check the updated code, it's not allowing the out-of-stock items to basket rather it's is redirecting to the product page and on the product page, the add to cart button is already disabled.
Thank you very much for the code! Just wanted to ask if there is any way that we can change the function of the add to cart button so when user clicks it - the item gets added to cart and the pop up shows that the item is added to cart but without them leaving the collection page. At the moment when user clicks the add to cart button - they get redirected to the cart page and item gets added to cart they need to click continue shopping.
It will be much more efficient if this friction is removed and users can add to cart without leaving the collection page.
Thank you!
@IvayloKolev Also something I'm looking into. Please come back if you find a solution to this matter
Thanks!
I also have this request. I've been trying to find a way to use the "quick add" feature again just to avoid forcing the user to go back and forth out of the shopping cart.
I'm waiting for that too, because the code itself works great. Only this little functionality is missing to make this button perfect.
That's a great piece of code for us. After implementing, I realized two issues,
1. Add to cart will redirect the customer to the cart page every time they click the add to cart. Would prefer the cart drawer like action like the add to cart on the product page.
2. Hence some of the product names are 2 lines, and the alignment of the 'add to cart' button on the collection page doesn't look good.
I tried inserting the code above the product title, but then the button is not working it is redirecting to the product page instead.
I hope you can come up with an updated solution or someone else can put here their expert help.
i tried the code but whenever the button is clicked it redirects me to the cart page how can i do this while being on same page and also page don't refreshes.
This code has been working perfectly for Dawn theme for a long time.
I have updated Dawn to latest version 15.0.0. and this code doesn't work for it (I tried to put the same code to card-product.liquid)
Is there any update of this piece of code ?
Thank you in advance.
Hi,
I have tried this but cannot locate the product-card-grid file in the code library.
I am on Dawn Version 6 - can you please assist? Tried pasting the code here:
card-product.liquid
But no success. Please help!
@jimpw90,
No need to add code, shopify added this feature.
I tried using the enable Quick Add button in theme editor (Dawn Theme) but that did not work...
@jimpw90,
It's strange. You can contact me on whatsapp +92 3486775142 and I can check it for you.
Hi. Have anybody else experienced that this button for some reason display differently on some devices? I have added this piece of code for add to cart buttons on collection pages for 2 stores now, and same thing for both of them. Nothing wrong with CSS, but on some mobile devices, I have experienced that these buttons display incorrectly. See screenshots. Anybody else with this issue?
depending on the file you are editing, quite possibly also:
<input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
This solution worked for Dawn version 15.0.0
Thank you very much!
Hi! I tried this on my shop and nothing showed up.
How can we add color to the add to cart button in the collection page ?
Hi vinodvinodh6.
That is a great question! Also something that we would like to know
Yes, I'd also like to know how to style this according to the theme, please!
Hey @VictorVaissier, if you need to add an "Add to Cart" button to your Shopify collection pages, watch this helpful tutorial on YouTube: https://www.youtube.com/watch?v=s98l1bUZe6k
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024