Add to cart button on collection pages (Dawn theme)

[VictorVaissier]

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.

[IttantaTech]

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

[VictorVaissier]

Hi IttantaTech!

Thanks for helping me,

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

[IttantaTech]

Can you please provide your store URL ?

[VictorVaissier]

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]

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

[VictorVaissier]

Great! Thank you!

https://vaissier.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=120555634732

[IttantaTech · 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 }}" />

[VictorVaissier]

Works like a charm!

Thank you so much!

[Hbishouty]

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!