Add to cart button on collection pages (Dawn theme)

Solved
VictorVaissier
Tourist
5 0 1

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.

 

add to cart 1.pngadd to cart 2.pngadd to cart 3.png

Accepted Solution (1)

Accepted Solutions
IttantaTech
Shopify Partner
510 55 92

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 }}" />

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com

View solution in original post

Replies 11 (11)
IttantaTech
Shopify Partner
510 55 92

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 }}" />

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
VictorVaissier
Tourist
5 0 1

Hi IttantaTech!

Thanks for helping me,

the new code still gives me the same error as in the printscreen

IttantaTech
Shopify Partner
510 55 92

Can you please provide your store URL ?

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
VictorVaissier
Tourist
5 0 1

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?

IttantaTech
Shopify Partner
510 55 92

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:-

IttantaTech_0-1633004611849.png

 

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
IttantaTech
Shopify Partner
510 55 92

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 }}" />

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com

View solution in original post

VictorVaissier
Tourist
5 0 1

Works like a charm!

 

Thank you so much!

Hbishouty
New Member
1 0 0

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!