How to change the Image Overlay Opacity color on Slideshow? (Shopify Dawn)

Store Design
1

Screenshot 2025-02-16 at 7.04.33 PM.png
Screenshot 2025-02-16 at 7.04.33 PM.png1216×700 1.06 MB

Hoping someone can help as I can’t seem to find this answer anywhere.

I am trying to change the “Image Overlay Opacity” from black to white on my Slideshow, as the black overlay makes my images appear too dark.

Does anyone know if there is code I can add to the Custom CSS field for that section to achieve this?

1 Like
2

Hi @pktmrkt

Please share your store URL so I can take a closer look

Best,

Daisy

3

Hi Daisy, URL is https://pktmrkt.com/

Thank you!

4

Hi @pktmrkt

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.banner:after, .banner__media:after {
    background: transparent !important;
}

Here is the result:

image_720.png
image_720.png720×448 353 KB

I hope this helps

Best,

Daisy

1 Like
5

Hi Daisy,

Thank you for the code. I had to change it a bit to get the results I wanted but it worked. It works with the slider in theme as well!

.banner:after,
.banner__media:after {
  background: white !important;
}

Screenshot 2025-02-16 at 9.49.57 PM.png
Screenshot 2025-02-16 at 9.49.57 PM.png2076×1350 569 KB

6

Hi @pktmrkt

It’s great to hear that! I originally set the color to white, and you changed it to transparent, correct? I’m glad to know it worked and resolved your issue.

If our answer was helpful, please mark it as the solution and give it a like—I would really appreciate it!

Best,

Daisy

1 Like