How can I consistently change the product image background color on each page?

Store Design
1

Hello

I am changing my product photos, so they have an invisible background.
it looks great on the product grid, the background appears white.

But on the Product Site, the background of the image appears in a Color.
The Color is a different on each Product, depending on the actual Product Color .

I want the background to be white (or maybe in a color, but a consistent one) on each product page, just like in the product grid.

How can i change that? I’m using the pipeline theme

1 Like
2

Hi @lydiaall ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

@lydiaall

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Thank you!

the store is: steezevintage.de

it’s not published yet, the password is: „laila“

5

@lydiaall

Please share the screenshot of what do you want!

Thanks!

6

On the product grid, the background is white / transparent. But on the product page, there is a darker background color.

the Color changes depending on the product.

E29C5C40-9DE9-4274-BFAB-249C1EBD5B88.png
E29C5C40-9DE9-4274-BFAB-249C1EBD5B88.png828×1792 97.8 KB

8B4CD614-096C-427E-BCFB-4DD1E1DC2A2B.png
8B4CD614-096C-427E-BCFB-4DD1E1DC2A2B.png828×1792 168 KB

1 Like
7

Hi @lydiaall ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.product__media .lazy-image {
    background: transparent !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

8

@lydiaall

thanks for url can you try this

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.lazy-image.mobile-zoom-wrapper {
    background: none !important;
}
1 Like
9

Thank you !

That solved the issue!

If I would like to set a different color as the background color on the product grid (for example a light beige instead of just white) is there a way to do this as well?

1 Like
10

@lydiaall

yes, please let me know where did you changes

1 Like