How to place 'shop now' button on an image in Brooklyn Theme?

Store Design

Topic summary

A user is trying to position a “shop now” button directly on top of an image rather than below it in their Shopify store using the Brooklyn theme. The store is not yet live.

Proposed Solution:

  • Another user provided custom CSS code to be added to the theme.css file
  • The code uses absolute positioning and media queries to overlay the button on the image

Current Status:

  • The CSS solution initially worked but has stopped functioning
  • The original poster is experiencing the same positioning issue again and is seeking additional help
  • The discussion remains unresolved with no follow-up solution provided yet
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have an image with text on my website and i would like be able to put the “shop now” on the image instead of under it. My store isn’t open yet; website: vanityeyz.com. Thanks in advance!

406B7024-6E64-476F-A152-EFAB7F5A8F63.jpeg
406B7024-6E64-476F-A152-EFAB7F5A8F63.jpeg1282×1873 161 KB

2

Hi, @MaxxVE

Can you try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.
@media(max-width:786px){
#shopify-section-16586143319247bf36 > div > div > div{
position: relative !important;
}
#shopify-section-16586143319247bf36 > div > div > div > div.feature-row__item.feature-row__text.feature-row__text--left{
position: absolute;
    top: 40%;
    left: 40%;
}

}
3

Hi!

This code was working at first, but now its not and Im having the same issue again. Can you help?