Add to cart works on my product page but does nothing on the collection grid — why?
If Add to Cart works fine on your product pages but does nothing, or adds the wrong item, from the collection grid, the cause is almost always in how each product card's form and variant ID are rendered, not a platform-wide bug.
What's going on
A merchant notices that clicking Add to cart works perfectly on an individual product page, but the same button on a collection page, the grid of product cards you land on from a category link, either does nothing, throws a console error, or adds the wrong product or variant to the cart. Since the storefront otherwise looks and functions normally, this reads as confusing rather than catastrophic, until you realize customers are quietly failing to buy directly from category and search-result pages, which is often where the bulk of browsing happens.
This is a template and JavaScript-scoping problem, not a Shopify platform outage. Product pages and collection pages are rendered from separate templates and often separate snippets, so code that correctly builds a form and tracks a selected variant on one page can be missing, duplicated, or pointed at stale data on the other. The fix is almost always specific to how your theme, or an app injecting cart JavaScript, built the collection-page button, so the right first step is comparing the two forms' markup rather than assuming something is broken platform-wide.
Why it happens
Shopify renders product pages and collection pages from separate templates. A collection grid loops the same product-card snippet many times, so any hard-coded ID, name, or JS selector that isn't made unique per product will collide across cards, and the browser or script always resolves to the first instance. Product pages also normally run option-picker JavaScript that writes the chosen variant ID into the form right before submit; collection cards frequently skip that logic and need the variant ID rendered directly in the markup instead, which is easy to omit or get wrong when the button is copied from the product template.
A second common cause is script scope: cart-drawer or AJAX-cart JavaScript, whether from your theme or a third-party app, sometimes only attaches its event listeners on the product template, or checks the current URL for a product path before it initializes. On a collection page that condition is never true, so the button either falls back to a broken default action or the click handler never fires at all.
5 ways to fix it
Turn on your theme's built-in quick-add setting first
Many Online Store 2.0 themes, including Dawn and its forks, ship with a built-in quick-add option for collection and search grids. In the theme editor, open the section controlling your product grid (often labeled Collection page, Product grid, or Featured collection), select the product card block, and look for a quick add or quick buy toggle. This uses cart logic already built and tested by Shopify or the theme author, so it's the lowest-risk fix and costs nothing. If your theme has no such option, it likely predates current theme conventions or the feature was removed by a previous developer, and you may need a developer to reintroduce it.
Give every product card's form and variant field a unique ID
A collection page renders one add-to-cart form per product from the same Liquid snippet, looped many times. If that snippet wasn't written with repetition in mind, every card can end up with an identical form ID or hidden variant input name, so the browser or your JavaScript always targets the first match. Clicking Add to cart on the third product can then submit the first product's form or its stale variant ID instead. Check your product card snippet and confirm the form ID, the variant input, and any JS selectors incorporate the product ID or card index rather than a static string shared across the loop.
Confirm the correct variant ID is actually being submitted
On a product page, JavaScript typically listens for option changes and writes the chosen variant's ID into a hidden field before submit. A collection card usually has no option picker, so its form needs the correct variant ID rendered directly at page load instead. If this snippet was copied from the product template without updating that reference, it can submit a blank, wrong, or out-of-stock variant ID, and the request will fail. Compare your working product-page form against the collection-card form in your theme code to confirm both reference a valid variant ID for that specific product.
Check whether an app's script only runs on the product page
Some cart-drawer, upsell, or bundle apps inject JavaScript that intercepts the native form submission and reroutes it to their own request, but only initialize on the product template or check the page URL for a product path before attaching their listener. On a collection page that condition never matches, so the click either falls through to a broken handler or does nothing. Temporarily disable cart-related apps one at a time, or test in a private browsing window with apps active, to see if add-to-cart on the grid starts working. If disabling an app fixes it, ask that app's support team whether it supports quick add from collection pages, since not all do.
Build a custom add-to-cart call for the collection grid
If your theme has no quick-add option and the problem isn't a simple ID collision, the most reliable custom fix is to bind a click handler on each card that sends the correct variant ID and quantity to Shopify's cart API, reading that ID from a data attribute rendered per product rather than pulled from the DOM by a shared class or ID. This mirrors how Shopify's own cart endpoints expect requests and sidesteps whatever markup or script conflict is breaking the native form. This is developer work, not a settings change, so budget time for theme code changes or bring in a developer if you're not comfortable editing Liquid and JavaScript directly.
Bottom line
Start with your theme's built-in quick-add toggle, since it's free and already tested by Shopify or the theme author. Only move to custom code once you've ruled out duplicate form IDs, a bad variant reference, or a conflicting app script. If you do end up needing a from-scratch quick-add build and don't want to maintain that code yourself long-term, that's the kind of narrow theme fix a Shopify developer can usually handle in a few hours.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.