How can I add a grey tint overlay to product images in Dawn?

Store Design
1

Hi There, basically we have cutout images on white and want to add a very small grey tint over the top - rather than changing every image background in photoshop.

My attempts in Dawn have failed, eg for collection pages, “card__inner” looked the perfect div to add a background colour with opacity but it always appears below the product image…? I’m missing something fundimental here…?

Any help much much much appreciated…? Thx

2

Hello @NH ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

3

Hi Diego, thx but its not an issue, and its an amend to vanilla Dawn code…?

4

@NH

If I understand correctly, depending on what images you have on your store it would require a different approach.

You can add an overlay to product page images by:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset >base**.css** and paste this at the bottom of the file:
.product__media-item modal-opener{
    position: relative;
}
.product__media-item modal-opener:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: #000000;
    opacity: 0.2;
}

#000000 = overlay color
0.2 = intensity (from 0 to 1)

diego_ezfy_0-1656325192081.png
diego_ezfy_0-1656325192081.png906×657 79.2 KB

Kind regards,
Diego

5

cheers, thx…

6

Hello, how can i use this code to make image overlay but conditional not for all products?