Remove grey backgrounbd on transparent product images

Store Design
, , ,
1

Hi everyone. I hope everyone doing well.

My website shows a grey background for products with a transparent (PNG) background. Is it possible to change it to white? If so, could you provide the necessary code?

Any help would be greatly appreciated.

Here is one of the transparent product image URL: https://ladyhyphae.com/collections/therapeutic/products/pink-buffalo

2

@Digital_Imran ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above

Result:

BSSCommerceB2B_0-1724858354117.png
BSSCommerceB2B_0-1724858354117.png1277×822 187 KB

If it helps you, please like and mark it as the solution.

Best Regards :heart_eyes:

3

Hello @Digital_Imran

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product__media.image-animate.media.media--square.media-mobile--square { background: #fff !important; }

niraj_patel_0-1724858635991.png
niraj_patel_0-1724858635991.png733×493 272 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
4

Thanak you @BSSCommerce-B2B it works . Can you also provide codes for the collection page? I attached the screenshot.
Here is the URL of the collection page: https://ladyhyphae.com/collections/therapeutic

Screenshot: https://prnt.sc/Q-b6hHmxiYur

5

@Digital_Imran , Please change the previous code like this
1 Like
6

Thank you so much @BSSCommerce-B2B . It works :grinning_face_with_smiling_eyes:

1 Like
7

Thank you so much @niraj_patel sir :slightly_smiling_face:

1 Like