Liquid, JavaScript, themes, sales channels
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!
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!
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?
User | RANK |
---|---|
26 | |
20 | |
17 | |
13 | |
8 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By