How to Remove White Background from Images in Shopify Theme

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

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; }

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

1 Like

@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”.

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

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

Result will be like,

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

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!

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,

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

many thanks,

@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