Add to cart button on collection pages (Dawn theme)

Topic summary

Goal: show an Add to Cart button on collection (grid) items in Shopify’s Dawn theme.

Key working fix (collection card context):

  • Use the first available variant from the card’s product object: . This resolved the original “not working” submission.
  • Alternative contexts seen: product.first_available_variant.id and card_product.variants.first.id, depending on file/scope.

Enhancements shared:

  • Updated code/video prevents out‑of‑stock items from being added; it redirects to the product page where the button is disabled.
  • Multiple YouTube guides were provided; screenshots used to illustrate layout/errors.

Open requests and issues:

  • Style the button to match Dawn (centering, margins/padding, theme button styles).
  • Add variant/option selection before the button.
  • Keep shoppers on the collection page (AJAX/cart drawer) instead of redirecting to cart.
  • Inconsistent mobile rendering reported on some devices.

Theme/version notes:

  • File targets vary (e.g., card-product.liquid). In Dawn v6, some could not find earlier file names.
  • Shopify later added a built‑in “Quick Add” feature; results vary (one user’s toggle didn’t work).
  • Dawn 15.0.0: one report said older code broke; another confirmed a working solution exists.

Status: core add-to-cart fix confirmed; UX/styling and AJAX/variants remain unresolved or case‑dependent.

Summarized with AI on December 24. AI used: gpt-5.

@IvayloKolev Also something I’m looking into. Please come back if you find a solution to this matter

Thanks!

1 Like