Luminocity for each Product thumbnail slightly decreased on Collection Page

Solved
Tourist
13 0 0

Hi Shopify Community,

 

I'm David Stephens, and our website is: miriamjoyeria.com

 

I've used the help from this forum before, and it's been very helpful.  This is my first time asking for help that I couldn't find elsewhere.


I am trying to edit the luminocity of the first picture of each product shown on the collection page for all of my products.  

In the attached picture our website (left) has a white background.  Each product picture has a white background, so the products don't look neatly separated.

In order to show a border and separation between products, similar to the website on the right, I would like the first product to have a slightly decreased luminocity or brightness.  To get the desired effect in Photoshop, the brightness is decreased by -2.

 

Would someone please provide me with the code necessary and where to input it?  I contacted the author of the original template purchased from Theme Forest, but they said it was not included in the template.  Maybe it could be added?

 

Thank you for your support.

 

screencapture.png

0 Likes
Shopify Expert
665 170 199

Hi, @DavidStephens ,

This is Evita from On The Map.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file.

 

.img-product {
    background-color: #FAFAFA;
}

And make the product images with a transparent background, right now they have a white background and the CSS won't do anything.

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
13 0 0

Hi Evita,

 

Would it be possible to keep the images we have?  We have a lot of products, so it would be a lot of additional work if it's not necessary.

 

I still want to keep the pure white background of the picture on it's product page.  A product page should show the pure white background of the product picture and will blend perfectly with the pure white background of the page itself.

 

I want to "dim" the picture slightly to show separation between background & product on a collection page only.

I've attached what I would like in Photoshop.  The luminocity is decreased by -2.

 

I would like to avoid uploading a different thumbnail for each product to be shown on the collection page.  Like I said, there are many products.

 

photoshop capture.png

0 Likes
Tourist
13 0 0

Sorry to be persistent, but would anyone have another way to do this?

0 Likes

Success.

Shopify Expert
2676 65 665

David, 

I would not recommend using transparent images, since they must be PNG and therefore much heavier then JPEGs (even if it wasn't a big deal to re-upload them all).

I'd suggest another CSS rule:

.img-product.relative:before {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.1); /* make 0.1 smaller for more transparency */
    height: 100%;
    width: 100%;
}

This will basically create an semi-transparent overlay over each product grid item  image.

 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
13 0 0
Hello Tim,

Thank you for the quick response.

Could you tell me where I could find that in the code? Would that be in theme.SCSS, or somewhere else?
0 Likes

Success.

Shopify Expert
2676 65 665

Ah, yes, 

put it at the very bottom of the theme.scss.liquid asset.

I'd strongly recommend to make a theme backup first via Actions=>Duplicate

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
13 0 0

Tim!  It worked!

Thank you so much.  This has been bothering me for years, and we finally have a perfect solution.  Thank you so much for all your support.



0 Likes