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.
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