Hello there, I have done this, but on mobile, i have very weird spacing on my buttons. (see photo) Can you advise how to correct that?
Thanks
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.