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

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

MissArtzz
Tourist
22 0 0

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

Replies 2 (2)

MissArtzz
Tourist
22 0 0

my website is www.missartz.com

vvast-paul
Shopify Partner
10 1 4

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.

Paul Simmonds
Acting Platform Developer
paul.simmonds@vvast.net
0117 214 1569

1st Floor, The Landing, 125 Redcliff Street, Bristol, BS1 6HU