Running into image saturation issues

Technical Q&A
,

Topic summary

Main issue: Hero/slider images in a Shopify “Be You” theme appeared noticeably desaturated, while other site images looked normal.

What was tried (unsuccessful): Changing PNG/JPG, compressing under 90 KB, using web-safe colors, setting theme overlays to transparent, and removing embedded color profiles. Image comparisons were shared; visuals are central to understanding the problem.

Diagnosis: The hero section’s slideshow had a theme color overlay applied via CSS, causing the washed-out appearance despite other adjustments.

Fix (actionable steps):

  • Go to Online Store > Themes > Customize.
  • Open Theme Settings (cog) > Custom CSS.
  • Add: .slideshow { --color-overlay: none; }

Outcome: Confirmed fix; colors in the hero section now match the originals. Status: Resolved; no further actions pending.

Summarized with AI on December 14. AI used: gpt-5.
1

So I’m running into an issue where my images are showing up super desaturated. I have tried changing file type from PNG to JPG, compressing the images (all to sub 90kb), making sure all my colors are web friendly, making theme overlays Transparent, AND removing embedded color profiles, but all the iterations turn out similarly desaturated from the original.

Here’s the result of the upload:

Desaturated image
Desaturated image770×294 182 KB

This is the original:

Saturation goal
Saturation goal728×290 161 KB

Is there something I’m missing here? I’m using the “Be You” theme.

2

Can you please share a link to a page with an issue image - I can take a quick look at a few simple things!

3

Hi Ollie!

You can find this image HERE - I’m finding that the issues are occurring with the hero section specifically, all other images on the site appear as they should.

4

Hey,

Thanks! I’ve found the issue.

Try this:

  1. Go to Online Store > Themes > Customise.
  2. Click the cog icon to access Theme Settings.
  3. Navigate to Custom CSS.

Then, paste the following code:

.slideshow {
        --color-overlay: none;
    }

Let me know if this helps! Don’t forget to like and mark this as the solution if it resolves your issue.

Cheers!

1 Like
5

Amazing, it totally worked!

Thank you so much, Ollie!

6

Awesome! Great to hear. I’m glad I could help :blush: