Debut Theme: Add to Cart button on homepage/collection pages

Store Design

Topic summary

Main issue: Debut theme lacks “Add to cart” on home/collection grids. Multiple users want to add it, align it with quantity/variants, keep shoppers on the same page after adding, and handle sold-out states.

Core solution shared:

  • Add a basic form to Snippets > product-card-grid.liquid: POST to /cart/add with variant ID and quantity inputs.
  • Use CSS in theme.css or theme.scss.liquid to fix layout: flex the form, set product title min-height, adjust margins/min-heights for .product-card, and mobile font/spacing tweaks.

Common customizations:

  • Align button next to quantity via flex CSS; adjust widths.
  • Normalize grid alignment by enforcing min-heights for titles/cards.
  • Remove the button on collections/home via CSS display:none.
  • Provide variant selector (dropdown) and align selector, qty, and button in one row.
  • Prevent redirect to cart by using AJAX add-to-cart/cart drawer (links shared to a GitHub gist and Shopify forum/dev docs). AJAX = add to cart without page change.
  • Requests to disable button/qty when sold out.

Outcomes: Several users confirm fixes (alignment, spacing). Some issues remain (AJAX stay-on-page, sold-out disabling, variant/spacing on mobile). Discussion is ongoing; solutions are case-by-case and often require site-specific CSS.

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

Hi @KetanKumar , I noticed you managed to help some other Shopify store owners with this issue. I’m facing the same issue now trying to align my Add to cart buttons on my collection page.

Screenshot 2021-01-30 at 19.04.53.png
Screenshot 2021-01-30 at 19.04.53.png2276×1226 327 KB

  1. I’d like to make it so the Add to Cart button is in line with the Quantity.

  2. I’d like to fix the height o the Product title so that the Quantity and Add to cart line will be aligned.

Would appreciate your help with this. Thank you!

Kristyn

1 Like