How to change background color of product image on product page? For transparent product images.

Solved

How to change background color of product image on product page? For transparent product images.

TeunvW17
New Member
5 0 0

Hello,

i want to change the product image background color on the product page. My product pictures are all transparent. How can I change the background color to gray (#EAEAEA)? 

Accepted Solution (1)
MandasaTech
Shopify Partner
723 146 153

This is an accepted solution.

Go to Theme.liquid file add this bottom CSS before </body> tag.

<style>

.product__media.media.media--transparent {
background-color: #EAEAEA !important;
}


</stye>

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at [email protected]
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

View solution in original post

Replies 9 (9)

MandasaTech
Shopify Partner
723 146 153

Hello @TeunvW17,
Please share your store URL.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at [email protected]
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
TeunvW17
New Member
5 0 0

Hi @MandasaTech ,

My store: www.expressedlifestyle.com

password: 1711

thanks for the quick responds!

MandasaTech
Shopify Partner
723 146 153

@TeunvW17,

Go to Online store >> Edit code >> Assets >> find base.css file  and add the below code bottom of the base.css file.

.product__media {
    background-color: #EAEAEA !important;
}
☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at [email protected]
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
TeunvW17
New Member
5 0 0

@MandasaTech 

Still not working 😞

MandasaTech
Shopify Partner
723 146 153

Can you please share screenshot of css file?

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at [email protected]
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
TeunvW17
New Member
5 0 0

Schermafbeelding 2022-11-07 om 14.19.04.png

MandasaTech
Shopify Partner
723 146 153

This is an accepted solution.

Go to Theme.liquid file add this bottom CSS before </body> tag.

<style>

.product__media.media.media--transparent {
background-color: #EAEAEA !important;
}


</stye>

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at [email protected]
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
TeunvW17
New Member
5 0 0

Thank you so much! @MandasaTech 🐐 

Ski6284
Visitor
3 0 0

Hi there. I'm having the same problem. I'm wanting to change the background colour of my product images. can you help?