Move the "Add to cart" button to the product image

Store Design
, , , ,

Topic summary

A user working with the Dawn theme wants to relocate the “Add to cart” button from its current position below product images to inside/overlaying the product images on their collection page.

Current Status:

  • The user has shared their store URL (luxartofficial.com/collections/all-frames) and included a screenshot showing the desired layout change
  • Community members have responded indicating this requires modifying the code structure, not just CSS
  • The discussion remains open with no solution provided yet

Key Points:

  • Originally requested as a CSS-only solution
  • Responders suggest code structure changes will be necessary
  • Affects the collection page display of products
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello dear Shopify community,
I would like to move the “Add to cart” button on my website. Currently, the button is located below the product image, but I would like to place it inside the product image instead (I’ve attached a photo illustrating the issue).
Does anyone happen to have an idea how I can solve this using CSS code?
Thank you very much!

I use the DAWN-Theme.

Bildschirmfoto 2025-05-07 um 17.12.05.png
Bildschirmfoto 2025-05-07 um 17.12.05.png780×1068 28.6 KB

1 Like
2

Hello @LUXARTSTUDIO
Welcome to the Shopify Community! Kindly share your store URL and password (if it is password-protected), so that I can review it and provide you with an accurate solution.

3

Hi @LUXARTSTUDIO

We should change the code structure a bit

4

Hello, thank you very much for the quick reply. The URL is: https://luxartofficial.com/collections/all-frames.
Thank you very much.

5

Hello, yes, I think so too. Do you have any idea how we can implement this?