Is there any way I can make my products all have transparent backgrounds instead of white?
Topic summary
Main issue: converting product images from white to transparent backgrounds.
Key points:
- Multiple replies state you cannot make a white background transparent with theme code. The image itself must have transparency.
- Recommended solution: re-upload product photos as PNGs with a transparent background (created in an image editor). JPGs with white backgrounds cannot be “made transparent” via CSS.
Theme/CSS guidance (if images already have transparency):
- Ensure the theme isn’t adding a background. Add CSS in Online Store → Themes → Edit code → Assets (base.css or theme.scss.liquid): .product-image { background: transparent; } then save and preview.
- Note: This only removes a container/background color in the theme; it does not remove white pixels inside the image.
Assistance offered:
- Some members requested the store URL and password (if protected) to review and advise.
Status/outcome:
- Consensus: code alone can’t remove white backgrounds from existing images; re-upload images with transparent backgrounds is required. Further help contingent on store access; no final resolution confirmed.
Hey @Ym21
If you uploaded the product pictures onto Shopify with a transparent background then I can help you out if you share your Store URL and Password if enabled, and if uploaded the product pictures onto Shopify with White background then I suggest you to upload them first with transparent background.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Ym21 ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets folder → base.css file or theme.scss.liquid file
Add this following code at the bottom of page
.product-image {
background: transparent;
}
Save and preview
Hope this can help.
Transcy
1 Like
You upload image with white space background so it cannot be change it by using code. You will need to upload your image with transparent background again
Hello @Ym21
Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.
The only way is to upload png transparent images to remove your background thanks.