FROM CACHE - en_header

Add to cart button on collection pages (Dawn theme)

Solved
VictorVaissier
Tourist
8 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 Solutions (2)

Accepted Solutions
IttantaTech
Shopify Partner
525 55 95

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

Muhammad_Ali_S
Shopify Partner
534 98 148

This is an accepted solution.

@VictorVaissier 

@GoDrinks-Bali 

 

Check out this video Guide.

https://youtu.be/593Xq0do2vE

Add to cart button on collection page.png

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing

View solution in original post

Replies 29 (29)
IttantaTech
Shopify Partner
525 55 95

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
8 0 1

Hi IttantaTech!

Thanks for helping me,

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

IttantaTech
Shopify Partner
525 55 95

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
8 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
525 55 95

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
525 55 95

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
VictorVaissier
Tourist
8 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! 

vinodvinodh6
New Member
1 0 2

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

 

VictorVaissier1
Tourist
6 0 2

Hi vinodvinodh6. 

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

Arati_Devasher
Shopify Partner
41 0 2

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

Arati_Devasher
Shopify Partner
41 0 2

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

GoDrinks-Bali
Excursionist
26 0 5

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
Tourist
8 0 1

 

 

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
Shopify Partner
534 98 148

This is an accepted solution.

@VictorVaissier 

@GoDrinks-Bali 

 

Check out this video Guide.

https://youtu.be/593Xq0do2vE

Add to cart button on collection page.png

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
GoDrinks-Bali
Excursionist
26 0 5

Hi @Muhammad_Ali_S 

Thanks (^0^)

GoDrinks_0-1641348233599.png

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

GoDrinks-Bali
Excursionist
26 0 5

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>

 

GoDrinks_0-1641349566564.png

 

archimed
Tourist
9 0 4

how can I add variation before add to cart button?