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

Solved
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 Expert
723 146 150

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 info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

View solution in original post

Replies 9 (9)
MandasaTech
Shopify Expert
723 146 150

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 info@mandasa.in
☞ 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 Expert
723 146 150

@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 info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
TeunvW17
New Member
5 0 0

@MandasaTech 

Still not working 😞

MandasaTech
Shopify Expert
723 146 150

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 info@mandasa.in
☞ 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 Expert
723 146 150

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 info@mandasa.in
☞ 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?