Adding light grey background to featured products

Store Design
, , ,
1

All my product images have a white background. I want them slightly grey.

I’ve managed to resolve this on all the product pages, but on the feature carousels, the products still have a white background. How do I create a grey background for the featured images as well?

2

@JayKay89 Can you please share this page link?

3

Hi @JayKay89 ,

Could you please share your Store URL and password (if applicable) so that I can review it and provide you with the appropriate solution code?

Looking forward to your response.

Thanks!

4

Hi Suyash1 - thanks for your reply.

Under the header, there is a “shop new styles” carousel. I would like those images (and all other featured products carousels) to match the same light grey background you see on the product page.

Thanks.

5

oh, and with the same rounded corners as the rest of the images! Thanks.

6

see above, thanks.

7

Hi @JayKay89 ,

Please go to Actions > Edit code > Assets > component-card.css file and paste this at the bottom of the file:

.card.card--product .media .card__inner .link {
        background: #000;
        opacity: .04;
}
8

@JayKay89

please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.card-wrapper .media.media--transparent.media--portrait.media--hover-effect:after {
    content: "";    position: absolute;
    top: 0;    left: 0;
    right: 0;    bottom: 0;
    height: 100%;    width: 100%;
    background: #000;    opacity: .04;
}
9

unfortunately this didn’t seem to work.

10

Hi @JayKay89 ,

Please change code:

.card.card--product .media .link {
        background: #000;
        opacity: .04;
}
11

amazing! this did the trick. thanks