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

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

[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?

[BrooksAndAsh21]

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

[Muhammad_Ali_S]

Check out the Updated Video.

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

[Sweets-n-Things]

#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]

@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.

[IvayloKolev]

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]

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

Thanks!

[brightwebs]

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]

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

[rejinjayaraj]

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]

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]

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]

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]

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

[jimpw90]

How do I add it to our site? 

www.blossomwood.ie

[jimpw90]

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

[Muhammad_Ali_S]

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

[Jesper20]

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]

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

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

[Flagsandsuch]

This solution worked for Dawn version 15.0.0

Thank you very much!

[Natasha_Carla]

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

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

[Jahid-KlinKode]

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