Solved

Transparent Background for Product Images on collection pages - IMPACT THEME

NatHypo
Tourist
21 0 2

HI!

I already tried many CSS I found in the community but none of them worked. I want to change the product images background  to transparent, now it's white even with the PNG file.

 

Thank you!

Accepted Solution (1)
suyash1
Shopify Partner
9260 1151 1495

This is an accepted solution.

@NatHypo - add this css to the very end of your theme.css file and check

.product-card__image{background-color: #f0f0f0;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

View solution in original post

Replies 13 (13)

suyash1
Shopify Partner
9260 1151 1495

@NatHypo - what color do you want in the background? can you please share your website link where you have these images?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
NatHypo
Tourist
21 0 2

Hi!

I want it transparent. It's not published yet, the theme is IMPACT. 

suyash1
Shopify Partner
9260 1151 1495

@NatHypo - can you share the preview link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
NatHypo
Tourist
21 0 2
NatHypo
Tourist
21 0 2

I testes with the 15000maH Beige battery, as you can see it's already in PNG file but it shows white.
https://6zkhfd1iaghfvh0s-55915937865.shopifypreview.com

suyash1
Shopify Partner
9260 1151 1495

@NatHypo - which product do you have with png images? I just checked this one as  test and it has jpg image

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
NatHypo
Tourist
21 0 2

This one , but please check it in the collections page - the background shows in white.

suyash1
Shopify Partner
9260 1151 1495

@NatHypo - because it is using this image which is jpeg, you need to add png image and it should work

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
NatHypo
Tourist
21 0 2

In the product page it looks good (transparent), but in the collection looks like this:

Screen Shot 2023-08-23 at 1.32.20 PM.png

suyash1
Shopify Partner
9260 1151 1495

This is an accepted solution.

@NatHypo - add this css to the very end of your theme.css file and check

.product-card__image{background-color: #f0f0f0;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
NatHypo
Tourist
21 0 2

It worked!! Thank you so much! 😀

suyash1
Shopify Partner
9260 1151 1495

@NatHypo - welcome, do let me know if you need anything , you have my email below, I will check it tomorrow.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

Made4uo-Ribe
Shopify Partner
6035 1448 1786

Hi @NatHypo 

Would you mind taking a look and sharing your store's URL along with the password if it's protected? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com