Add Ajax "Quick Add to Cart" to Collection page of Debut theme?

Technical Q&A

Topic summary

Goal: enable an AJAX “Quick Add to Cart” on Debut theme collection pages so shoppers can add items, see a notification, and remain on the collection page (like the product page behavior).

Proposed approaches:

  • Use a third‑party app (noted in French) to add the button beneath products; Debut doesn’t include this by default.
  • Manually add a button by editing product-card-grid.liquid; however, the key ask is AJAX behavior, not just the button.
  • Implement AJAX via Cart.js (link provided), a JS library that works with Shopify’s cart API to add items without page reload.
  • Add a custom snippet (addtocart) and include it in the collection template (include ‘addtocart’). Code snippets are central to this thread.

Results and issues:

  • One user reported the snippet “works perfectly.”
  • Another received Liquid errors: missing snippets/icon-error.liquid and translation strings (general.accessibility.error, products.product.quantity_minimum_message), indicating required assets/translations must be added or references removed.
  • A styling question remains on reducing spacing between the “Add to cart” button and product (likely a CSS adjustment).

Status: partially resolved. Multiple solutions exist; AJAX via Cart.js is recommended. Some implementations require fixing missing theme assets/translations and CSS spacing. Discussion remains open.

Summarized with AI on January 17. AI used: gpt-5.
9

I tried this on my site, but I got a liquid error message like this in place of the “Add to cart” section:

translation missing: en.general.accessibility.error Liquid error (snippets/addtocart line 48): Could not find asset snippets/icon-error.liquid translation missing: en.products.product.quantity_minimum_message

Did I miss a step?