How can I properly overlay a badge onto a product image?

Store Design
, , ,

Topic summary

Issue: A metafield-based badge meant to overlay in the upper-right of the product image was appearing centered above the image instead of overlaying.

Context: Badge display is triggered by URL on product pages; a preview link was provided. The problem was CSS-related positioning/width of the overlay element.

Solution provided:

  • Navigate: Edit code → Assessments → Theme.css.
  • Append this CSS at the end of the file: .product-gallery__media > .overlay { width: unset; }
  • Screenshots were shared to illustrate where to add the code.

Outcome: The original poster confirmed the fix worked, and the badge now overlays as intended.

Status: Resolved; no further action requested.

Summarized with AI on January 12. AI used: gpt-5.
1

Hi there,

I am working on implementing a metafield to display badges on product pages based on URL. I have it mostly there but I would like the badge to display on the upper right of the image and right now it is displaying in the center above the product image. Doesn’t appear to be overlaying.

Here’s a link so you can see what I am talking about:

https://gxn9mezp9abnm1n5-73760833855.shopifypreview.com/products/discovery-set-black

Anyone out there want to help me solve this?

Thank you!!!

2

Hi @SeanHebein ,

Please follow these steps: Edit code → Assessments → Theme.css

![view - 2023-11-23T142451.064.png|1917x927](upload://5zlElQVKSotMq8Uo9zSoFa2SLD2.png)

view - 2023-11-23T142454.477.png
view - 2023-11-23T142454.477.png1896×920 29.3 KB

Copy this code to the end of the file:

.product-gallery__media > .overlay {
   width: unset;
}

Hope it helps @SeanHebein

3

Worked great! Thank you so much!