Add to Cart Button on Home Page & Collections Page

Technical Q&A

Topic summary

A user seeks to add “Add to Cart” buttons directly on homepage and collection pages, allowing customers to purchase without clicking through to individual product pages.

Solutions Offered:

  • Manual code edit approach: Modify the product-card.liquid file in the theme editor by inserting specific code above a closing </div> tag at the file’s bottom.
  • Theme-specific considerations: The Brooklyn theme may not have a product-card.liquid file, requiring alternative approaches. The Supply theme also presents different file structure challenges.
  • AJAX cart compatibility: If using an AJAX/dynamic cart, additional JavaScript modifications will be necessary beyond the basic liquid file changes.

Current Status:

The discussion remains open with users requesting theme-specific guidance. A YouTube tutorial link was shared for step-by-step implementation. Multiple participants offered assistance for customization needs, but no confirmed resolution has been reported by the original poster.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

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

2

@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
  5. Insert the below code just above the tag and hit save.
{%- if product_card_product.variants.size == 1 -%}

{%- else -%}
  
  
  

{%- endif -%}
3

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 Page
Home Page1440Ă—900 263 KB

Collections Page
Collections Page1440Ă—900 272 KB

4

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.

5

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

6

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

1 Like
7

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