How did you sort the issue? I am having a similar issue and my buttons are appearing on the right side of the products instead of under the products?
Topic summary
Goal: Add an “Add to Cart” button to products on Brooklyn theme collection pages, ideally appearing over the product image on hover.
Main implementation:
- Edit Snippets: product-card-grid.liquid or product-grid-item.liquid.
- Insert a form below the price block: with a hidden variant id, quantity input, and submit button (e.g., value=“Add to cart”).
- Correct placement (e.g., below the price around line ~100) prevents the button from appearing beside/left of the product.
Common issues and fixes:
- Uneven/staggered buttons due to variable title heights: add to assets/theme.scss.liquid
.template-collection #CollectionSection .grid-product__title { display:block !important; min-height:175px; } - Buttons misaligned or off-center: generally caused by where the form is inserted; moving it to the correct spot resolved for several users. Some centering questions remained.
- Redirect to cart after adding: forum link provided to stay on the same page and show feedback (e.g., “Added”); one user confirmed it helped.
Notes:
- Multiple screenshots were shared to illustrate alignment issues.
- Several users reported successful fixes; others requested store-specific help.
- The hover-overlay request was not directly addressed; solutions focused on a static button placement. The discussion remains partially open for alignment/UX refinements.
- A YouTube tutorial was shared for guidance.