add to cart button issue

Shopify Discussion

Topic summary

A Shopify store owner customized their “add to cart” button on collection pages using CSS with a negative margin-top value (-140px). This caused the button to partially or completely hide product titles and prices for some items, despite all product images being uniformly sized (800×800).

Initial Solution:

  • A helper provided CSS code to resolve the positioning issue
  • The fix successfully corrected button placement

New Problems Emerged:

  • Product images became unclickable after applying the CSS fix
  • The store owner requested hover effects where the add to cart button appears when hovering over product images
  • Later requested alignment adjustments for the buy now button with quantity selector (Dawn theme)

Current Status:

  • The client temporarily accepted unclickable product images
  • Additional CSS was provided for buy now button alignment
  • The issue has resurfaced: collection page images are now also unclickable, similar to the earlier product image problem
  • The discussion remains open with the store owner seeking further assistance

Note: Some text in the conversation appears reversed/encoded, suggesting potential formatting issues in the original thread.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
8

@momsabhiruchi Please add below css.

.product__info-container .product-form {
    margin-top: -62px;
    padding-left: 150px;
}
.product__info-container .product-form .shopify-payment-button {
    margin-left: -148px;
}