Add An "Add To Cart" Button in Collection Page

[mknylgn]

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.

[NomtechSolution]

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]

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

[mknylgn]

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

[made4Uo]

Hi @mknylgn 

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

[mknylgn]

I am using Envy Theme.

[made4Uo]

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. 

[borntoglam]

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]

Nope. We just bought an app that shows the add to cart button.

[borntoglam]

which app?

[mknylgn]

Here: CBB • Add To Cart Anywhere

It's only 4.99 a month.

[borntoglam]

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]

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