Add to Cart Button on Home Page & Collections Page

[Arjun086]

App for Add to Cart Buttons on Home Page & Collections Page ?

[shadowsfall118]

@Arjun086 no need for an app.

1. Login to admin > Online Store > Actions > Click Edit code.
2. Search for the file product-card.liquid
3. Open that file
4. Go to the bottom of the file and look for </div>
5. Insert the below code just above the </div> tag and hit save.

{%- if product_card_product.variants.size == 1 -%}
<form method="post" action="/cart/add" class="ContactForm center">
  <input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" />
  <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="button" style="margin-top:7px;" />
</form>
{%- else -%}
  <div class="center">
  <input type="button" class="button" style="margin-top:7px;" onclick="location.href='{{ product_card_product.url | default: '#' }}'" value="View Options" />
  </div>
{%- endif -%}

[Arjun086]

I mean having add to cart button visible on products in homepage and collections page so that the buyer can directly click on it instead of clicking on the product. For reference attaching samples. 

Home PageCollections Page

[Savior]

Hello @Arjun086 

Yes you can add to cart without app on collections and homepage grid using @shadowsfall118 reply.

But if you are using Ajax cart drawer then it will need changes in JS too.

Let me know if you need any help.

[Nemanja159]

Hello, any idea about Supply theme? 
It doesn't have product-card file. 

[dhatumaleuy]

Hi! I don't seem to see the product-card.liquid, help? I'm on Brooklyn.

[Jahid-KlinKode]

Hi @Arjun086, solve the issue of adding an "Add to Cart" button on your Shopify collection pages with the step-by-step guidance provided in this YouTube video: https://www.youtube.com/watch?v=s98l1bUZe6k