product image lost behind background colour

Store Design

Topic summary

A user encountered a display issue where product images in their featured collection were hidden behind a custom background color they had applied.

Solution Provided:

  • Add CSS code to the theme.liquid file (above the </body> tag) to adjust the z-index of product images, bringing them to the foreground
  • This initially resolved the image visibility problem

Follow-up Issue:

  • The “sold out” button then disappeared after applying the fix
  • An additional CSS snippet was provided to restore the button by adjusting its z-index and background properties

Final Outcome:

  • The user briefly reported images disappearing again, but quickly resolved it by realizing they had accidentally removed the original code
  • Issue fully resolved with both product images and sold out buttons displaying correctly
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

IMG_7151.png
IMG_7151.png1290Ă—2796 162 KB

IMG_7152.png
IMG_7152.png1290Ă—2796 196 KB

my product image in my featured collection is lost behind the background colour which I have changed. Attached is the code i used to get the background colour in the first place.

Can anyone help to get the picture back?

1 Like
2

Hey @sjosborne

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742408950603.png
Moeed_0-1742408950603.png1860Ă—825 73.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Amazing, thank you!

1 Like
4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

5

Hi although, the sold out button is missing

1 Like
6

Hey @sjosborne

Keep the previous code and add this new code above in the end of theme.liquid file

.card__badge.bottom.left {
    z-index: 99 !important;
    background-color: transparent !important;
}

RESULT:

Moeed_0-1742410245896.png
Moeed_0-1742410245896.png894Ă—422 83.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

Hi, this worked but no the images disappeared again.

IMG_7153.png
IMG_7153.png1290Ă—2796 213 KB

8

Hi, i fixed this, i accidentally removed the first code. Thank you so much.

1 Like
9

Glad to hear,If you require any more help, please don’t hesitate to reach out. :slightly_smiling_face: