Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Add to cart button on collection pages (Dawn theme)

Solved

Add to cart button on collection pages (Dawn theme)

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)
IttantaTech
Shopify Partner
525 55 103

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
669 122 185

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!
- Feel Free to Contact | Whatsapp +92 3486775142

View solution in original post

Replies 40 (40)

IttantaTech
Shopify Partner
525 55 103

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 103

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 103

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 103

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
Visitor
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! 

Arati_Devasher
Shopify Partner
41 0 3

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

GoDrinks-Bali
Excursionist
37 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
669 122 185

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!
- Feel Free to Contact | Whatsapp +92 3486775142
GoDrinks-Bali
Excursionist
37 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
37 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
11 0 4

how can I add variation before add to cart button?

BrooksAndAsh21
Visitor
3 0 0

Wondering the same! Commenting in case someone finds a solution. 

Muhammad_Ali_S
Shopify Partner
669 122 185

Check out the Updated Video.

https://www.youtube.com/watch?v=5uzyReIlKOs
add to cart.jpg

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
Sweets-n-Things
New Member
8 0 0

#hi, agree it needs Variations to be perfect, and if the item is out of stock to make the button not available or state out of stock and be not clickable. - currently it allows it to add to the basket even tho its out of stock. not ideal!
all help appreciated 

Muhammad_Ali_S
Shopify Partner
669 122 185

@Sweets-n-Things,

 https://www.youtube.com/watch?v=5uzyReIlKOs

Please check the updated code, it's not allowing the out-of-stock items to basket rather it's is redirecting to the product page and on the product page, the add to cart button is already disabled.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
IvayloKolev
Visitor
2 0 2

Thank you very much for the code! Just wanted to ask if there is any way that we can change the function of the add to cart button so when user clicks it - the item gets added to cart and the pop up shows that the item is added to cart but without them leaving the collection page. At the moment when user clicks the add to cart button - they get redirected to the cart page and item gets added to cart they need to click continue shopping.

It will be much more efficient if this friction is removed and users can add to cart without leaving the collection page.

Thank you!

VictorVaissier1
Tourist
6 0 3

@IvayloKolev Also something I'm looking into. Please come back if you find a solution to this matter

 

Thanks!

brightwebs
Shopify Partner
6 0 3

I also have this request. I've been trying to find a way to use the "quick add" feature again just to avoid forcing the user to go back and forth out of the shopping cart.

medpak
Excursionist
15 0 3

I'm waiting for that too, because the code itself works great. Only this little functionality is missing to make this button perfect.

rejinjayaraj
Visitor
1 0 1

That's a great piece of code for us. After implementing, I realized two issues, 

 

1. Add to cart will redirect the customer to the cart page every time they click the add to cart. Would prefer the cart drawer like action like the add to cart on the product page.

2. Hence some of the product names are 2 lines, and the alignment of the 'add to cart' button on the collection page doesn't look good. 

 

I tried inserting the code above the product title, but then the button is not working it is redirecting to the product page instead.

 

I hope you can come up with an updated solution or someone else can put here their expert help.

krish115
Shopify Partner
26 0 5

i tried the code but whenever the button is clicked it redirects me to the cart page how can i do this while being on same page and also page don't refreshes.

API2
Visitor
2 0 0

This code has been working perfectly for Dawn theme for a long time.

I have updated Dawn to latest version 15.0.0. and this code doesn't work for it (I tried to put the same code to card-product.liquid)

Is there any update of this piece of code ?

Thank you in advance.

jimpw90
Visitor
3 0 0

Hi, 

 

I have tried this but cannot locate the product-card-grid file in the code library.

 

I am on Dawn Version 6 - can you please assist? Tried pasting the code here:

 

card-product.liquid 

 

But no success. Please help! 

Muhammad_Ali_S
Shopify Partner
669 122 185

@jimpw90,
No need to add code, shopify added this feature. 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
jimpw90
Visitor
3 0 0

How do I add it to our site? 

 

www.blossomwood.ie

jimpw90
Visitor
3 0 0

I tried using the enable Quick Add button in theme editor (Dawn Theme) but that did not work...

Muhammad_Ali_S
Shopify Partner
669 122 185

@jimpw90,
It's strange. You can contact me on whatsapp +92 3486775142 and I can check it for you. 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
Jesper20
Shopify Partner
29 1 4

Hi. Have anybody else experienced that this button for some reason display differently on some devices? I have added this piece of code for add to cart buttons on collection pages for 2 stores now, and same thing for both of them. Nothing wrong with CSS, but on some mobile devices, I have experienced that these buttons display incorrectly. See screenshots. Anybody else with this issue?

mooseshoes
Shopify Partner
17 0 3

depending on the file you are editing, quite possibly also:

 

<input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />

Flagsandsuch
Shopify Partner
3 0 0

This solution worked for Dawn version 15.0.0

Thank you very much!

Natasha_Carla
New Member
4 0 0

Hi! I tried this on my shop and nothing showed up. 

vinodvinodh6
Visitor
1 0 3

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

 

VictorVaissier1
Tourist
6 0 3

Hi vinodvinodh6. 

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

Arati_Devasher
Shopify Partner
41 0 3

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

Jahid-KlinKode
Excursionist
145 1 5

Hey @VictorVaissier, if you need to add an "Add to Cart" button to your Shopify collection pages, watch this helpful tutorial on YouTube: https://www.youtube.com/watch?v=s98l1bUZe6k