How to add "add to cart" button on my collection page

Store Design

Topic summary

Users are seeking to add “Add to Cart” buttons directly on collection pages in Shopify, primarily using the Debut theme, to allow customers to purchase without visiting individual product pages.

Common Implementation Issues:

  • Button placement problems: buttons appearing in wrong locations, overlapping images, or not aligning properly with product grids
  • Functionality failures: buttons redirecting to cart page instead of adding items, or not adding selected variants correctly
  • Price and variant selector issues: prices not updating when variants change, only first variant being added regardless of selection

Proposed Solutions:

  • Insert form code with quantity picker and submit button into product-card-grid.liquid or product-grid-item.liquid snippet files
  • For Brooklyn theme: add code around line 82 before the product meta link
  • One user references a solution to prevent cart page redirect and stay on collection page after adding items

Additional Requests:

  • Display percentage discounts on collection page products
  • Maintain proper button styling and alignment with product images
  • Enable rapid adding of multiple products without page redirects

Status: Discussion remains open with multiple users reporting persistent formatting and functionality issues despite attempting suggested code modifications. No universally working solution has been confirmed across different theme variations.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
34

Hi!

I ended up doing like you said, and it all works except the quantity selector. Upon clicking it, it takes me to the product page and asks me to select the quantity from there, I’m unable to increase quantity from the collections page itself.

Please do help me