Add An "Add To Cart" Button in Collection Page

mknylgn
Tourist
7 0 1

Can you please share with me a code for Add To Cart Button in my collection page? I tried to follow the guides I found but whenever I tried to use the "Add To Cart" button, it says that the ID is invalid? Thank you.


Envy theme

 

Code I used:

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>

 

Thank you.

Replies 13 (13)

NomtechSolution
Astronaut
1245 113 149

Here's an example of how you can modify the code to include a loop when displaying products on the collection page:

{% for product in collection.products %}
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <input min="1" type="number" id="quantity" name="quantity" value="1" />
    <input type="submit" value="Add to cart" class="btn" />
  </form>
{% endfor %}
mknylgn
Tourist
7 0 1

Where should I add this one? In product grid? At the bottom part or should I insert it before the </article>?

mknylgn
Tourist
7 0 1

I tested this too but it's not adding to the cart.

made4Uo
Shopify Partner
3832 716 1163

Hi @mknylgn 

 

You need to call the code from the collection product card. What theme are you using?

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
mknylgn
Tourist
7 0 1

I am using Envy Theme.

made4Uo
Shopify Partner
3832 716 1163

Oh. Not familiar with the theme, I would suggest to see if you get support from the theme provider. If not, you need to hire a developer who will need to read and write the code for you. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
borntoglam
Tourist
24 0 1

did you ever get a response to this?  I'm having the same issue and any solutions found either don't work or don't allow for the selection of which variant you want to add to cart.

mknylgn
Tourist
7 0 1
Nope. We just bought an app that shows the add to cart button.
borntoglam
Tourist
24 0 1

which app?

mknylgn
Tourist
7 0 1
Here: CBB • Add To Cart Anywhere

It's only 4.99 a month.
borntoglam
Tourist
24 0 1

How did you deal with the alignment issue caused by items with variants?  The add to cart button is lower on the page for those items b/c the variant selector is above it.  That variant selector is not there is there isn't a variant

mknylgn
Tourist
7 0 1
Sorry I can't help on that part. We don't use variants so the app worked
fine for us.

Jahid-KlinKode
Excursionist
145 1 5

Hi @mknylgn, need an "Add to Cart" button on your Shopify collection pages? Follow the instructions in this YouTube tutorial: https://www.youtube.com/watch?v=s98l1bUZe6k