Hello, I’m looking to make my product background transparent for all of my products. They’re all saved as PNG’s but they still have a white background. What do I have to add to my CSS? I’m using the Sense theme.
Topic summary
Users are trying to remove white backgrounds from product images in Shopify’s Sense theme, even though images are saved as PNGs with transparency.
CSS Solutions Offered:
- Remove box-shadow from card elements in
component-card.css - Add custom CSS to
theme.liquidtargeting.color-scheme-1and.color-scheme-2classes, setting--color-backgroundand--gradient-backgroundtonone - Use browser inspection tools to identify specific CSS classes affecting product card backgrounds
Key Caveat:
Modifying color scheme variables globally can unintentionally make other elements transparent (like newsletter input fields), requiring manual fixes for affected components.
Recommended Solution:
The simplest approach is through Theme Settings → Product Cards, where you can:
- Delete the background hex value or match it to your site background
- Set shadow opacity to 0
- Apply the same settings to Collection Cards
This method avoids CSS conflicts and doesn’t require code editing. Users confirm this works effectively without side effects.
.card--standard .card__inner:after{
box-shadow:none !important;
}
try this in your component-card.css
Hello @teemania ,
You can follow these steps:
- Go to Online Store->Theme->Edit code
- Open your theme.liquid file, paste the below code before
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
1 Like
does not work
try this it worked for me place this code instead
.color-scheme-1 { --color-background: none !important; }the way i figured this out was by inspecting my image and unchecked styles until the background finally disappeared for me i found the div or class was called .color-scheme-1 and then i basically just changed background to none
please note that the product image you upload for your product must be a .png so the image itself must have a transparent background
i realized this doesnt change the collection background for products so i just used the inspection tool again and turns out you have to get rid of the background as well for
.color-scheme-2 as well. but in this case it will be the gradient background though. please update your code like below for changes to both: .color-scheme-1 { --color-background: none !important; } .color-scheme-2 { --gradient-background: none !important; }
hope that helps or shows u how to do it if your theme is different
1 Like
ok sorry i just realized that anything else that uses these as color will be changed to transparent as well. for example my email input for newsletter subscription changed from white to transparent. This actually worked out for me bc i think transparent for everything fits better for my website but for everyone else you will need to manually input a color for the background of other inputs. the reason why i would just do this way where you get your products transparent and have to change everything back to white for your other inputs versus just changing the backgrounds for every product is because then you will have to change the background individually for each and every product and for every new product you add (from my understanding). if not the best way, hopefully someone else has a better answer!
I was having the same issue. The best solution is to go into your Theme Settings on your Online Store. Then select Product Cards and make the background transparent (delete the hex value) or the same color as your background. I also set opacity of the shadow to 0. You can do the same thing for Collection Cards.
1 Like
This is the easiest way to achieve the op desired effect. TBC if you dont see the hex and you have a Scheme set, click the Scheme, select the edit button (on your scheme), you will then see the Hex value, highlight the Hex and delete, then hit save. This only edits the Scheme for the Product cards. Boom