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! 

[vinodvinodh6]

How can we add color to the add to cart button in the collection page ?

[VictorVaissier1]

Hi vinodvinodh6. 

That is a great question! Also something that we would like to know

[Arati_Devasher]

Yes, I'd also like to know how to style this according to the theme, please!

[Arati_Devasher]

I'd also like to know how to style this according to the theme, please! Thanks! 

[GoDrinks-Bali]

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.

[VictorVaissier]

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

[Muhammad_Ali_S · Accepted solution]

@VictorVaissier 

@GoDrinks-Bali 

Check out this video Guide.

https://youtu.be/593Xq0do2vE

[GoDrinks-Bali]

Hi @Muhammad_Ali_S 

Thanks (^0^)

now I might just edit the margins or padding to fit right in the middle. Or can I use code center?

[GoDrinks-Bali]

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>

[archimed]

how can I add variation before add to cart button?