How to Remove White Background from Images in Shopify Theme

Store Design
1

I am currently facing an issue with my Shopify store where the images I upload automatically have a white background applied to them. I would like to know how to disable this native behavior in my refresh theme.

many thanks.

my preview to my store: https://s8u9ez1wqiwc0ti5-61049766108.shopifypreview.com

I would like to turn of this behavior on all my theme pages, entire theme

1 Like
2

Hello @PhMA

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

.card--standard .card__inner { background: unset !important; }

Shelu_jain_0-1725331064843.png
Shelu_jain_0-1725331064843.png1320Ă—499 466 KB

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

1 Like
3

@PhMA Please follow below steps to remove the white background. Let me know whether it is helpful for you.

  1. From admin go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.

Vinsinfo_0-1725343680922.png
Vinsinfo_0-1725343680922.png319Ă—422 7.88 KB

  1. Go to “component-card.css” file.

Vinsinfo_1-1725343684889.png
Vinsinfo_1-1725343684889.png478Ă—717 20.1 KB

  1. Paste the below code at the bottom of the file and save changes.
.card-wrapper .card__inner {
    background-color: transparent;
}

Vinsinfo_2-1725343690672.png
Vinsinfo_2-1725343690672.png1891Ă—776 89.4 KB

Result will be like,

Vinsinfo_3-1725343695583.png
Vinsinfo_3-1725343695583.png1867Ă—885 270 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

4

Hi @PhMA ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

5

many thanks, is this solution setting the background to transparent on all the pages and sections, not only on a specific?

can you point me via screenshot, where exactly I need to add the code. I was not able to find head

many thanks,

6

many thanks, is this solution setting the background to transparent on all the pages and sections, not only on a specific?

many thanks,

7

@PhMA Yes, but it will only remove background color for the product cards in all pages. To remove background color from all images in all pages, please add below code in base.css file. We have reviewed your site and provided code based on it. This will remove background color from all images that has transparent background, if a image itself has white background, then you need to upload image with white background. Let me know whether it is helpful for you.

.product-media-container, .image-with-text__media, .media {
    background-color: transparent !important;
}

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

1 Like