All things Shopify and commerce
I want to increase the saturation color of my products images, any coding?
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:
<style>
.class-of-images-to-be-affected-here {
filter: saturation(2);
}
</style>
to break that code snippet down a bit, the <style> and </style> 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 <style></style> 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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025