How can I increase the saturation of my product images using code?

Shopify Discussion

Topic summary

Goal: Increase saturation of product images via code on a Shopify site.

Context: The site URL was shared, but browser inspector/console is blocked, limiting direct guidance.

Proposed solution:

  • Use a CSS filter on product image elements to increase saturation (e.g., within … tags).
  • Target the correct images via a CSS selector (the “selector” identifies which elements to style).
  • Locate the relevant class names by opening theme files and finding the image elements: search for “<img” or “| image_tag” in files like main-product.liquid (product page) and product-card.liquid (collection grid).
  • Apply a filter rule to the selector, e.g., filter: saturation(2); where 1 = 100% (normal), 0.5 = 50% (washed out), 2 = 200% (double saturation).
  • Place the CSS in main-product.liquid and main-collection-product-grid.liquid, or fallback to theme.liquid.

Notes:

  • A code snippet with the CSS filter is central to the solution; the helper explains structure and usage.

Status: Guidance provided; user needs to implement and adjust the saturation value. No confirmation or resolution yet.

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

I want to increase the saturation color of my products images, any coding?

2

my website is www.missartz.com

3

Hi @MissArtzz unfortunately you’ve blocked inspector/console/rightclick on your site so I can only be so helpful.

You basically want to apply a CSS rule to all your product images that increases saturation, this is done with a CSS filter like so:

to break that code snippet down a bit, the and signify the opening/closing of style brackets, that is styling rules that will be applied to elements on the page.

The .class-of-images-to-be-affected-here part is known as a “selector” and it’s how we select the specific elements on the page we want to affect, to find out what yours are, open up your theme code and look in a file that contains your images (I’m guessing you’ve started with the Dawn theme so it’ll probably be something like main-product.liquid for the main product page, or product-card.liquid for the collections page). Then you want to use ctrl+f / cmd+f (on Mac) to search for some specific code, this will either be <img (including the <) or it’ll be | image_tag (including the | which is called a “pipe character”)

When you’ve found the image tags, there should be a bit that says class=“my-class-here” or class: ‘my-class-here’ you want to take the ‘my-class-here’ bit, and paste it between the . and the { in the snippet I sent you above.

now the part that actually changes the saturation is the filter: saturation(2);

The filter tells the site there’s an image filter being applied, the word saturation is self-explanatory, the (2) is to say “double the saturation” basically, filter’s tend to be measured on a scale of 1, where 1 = 100%, so if you had filter: saturation(1) the pictures would look normal, saturation(0.5) the pictures would look washed out with a saturation of 50%, and for your case saturation(2) doubles the saturation.

You then want to copy and paste that whole snippet (including the tags) somewhere in your theme, I’d recommend main-product.liquid and main-collection-product-grid.liquid if you have them, otherwise theme.liquid will do just fine.

With this knowledge you should be able to have a play about with the level of saturation (change the number in the () brackets after the word saturation) and apply the affect to any number of images you’d like!

Hope that helps.