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.
11

@SkynSin

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.product-card + form {
    display: flex;
    justify-content: space-between;
}
.product-card + form input {
    width: 70%;
}
.product-card + form input#quantity {
    width: 25%;
}
1 Like