Add to cart button on collection page & suggested items

Store Design
, ,

Topic summary

A user is attempting to add a functional “Add to cart” button to collection pages and suggested item sections. While they’ve successfully positioned the button visually, it’s non-functional—clicking anywhere in the product area (button, title, or price) redirects to the product page instead of adding items to cart.

Technical details:

  • The user has implemented form code with quantity and variant ID inputs
  • The button appears correctly but behaves like a standard product link
  • Similar issues have been mentioned in forums previously, but no clear solution has been found

Current status:

  • The issue remains unresolved
  • User is seeking suggestions or guidance
  • A screenshot was provided showing the button placement
  • Code snippet included (partially obscured/encoded in the post)
Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m trying to have an Add to cart button on collection pages (& suggested items elsewhere).
As you can see from the screenshot I’ve managed to add & position the button, however the button doesn’t actually do anything, besides directing to the product page. almost asif there isn’t a button at all; clicking anywhere in this area (product title / price) will lead you to the product page too.

I’ve added the code below and I’ve seen this issue raised on the forum a few times over the years, but can’t really find an answer - only to other related issues. Any suggestions would be appreciated!

{% comment %}
Next bit of code has been added to include “Add to Cart” button below every product in a grid
{% endcomment %}







LeondeR_0-1676622285521.png
LeondeR_0-1676622285521.png2880×1592 284 KB

website preview: https://nsmjmldpy5gtutt9-7231045683.shopifypreview.com