Solved

Debut: gray background instead of transparent

Jorgemm
Tourist
7 0 1

Hello,

Every product image that I upload with a transparent background (.png file) gets an annoying gray background. (debut theme)

How can I remove this? And let it be just transparent.

2021-03-29_16-22-51.png

 

I have tried solutions from similar posts but they didn't work. Also, the header logo had the same problem but it was successfully solved  with:

.site-header__logo-image {
background: transparent!Important;
animation: none!important;
}

Thanks in advance! 🙂

Accepted Solution (1)
ZestardTech
Shopify Expert
5429 978 1303

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-product [data-image-loading-animation] {
background-color: transparent !important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 7 (7)

ZestardTech
Shopify Expert
5429 978 1303

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Jorgemm
Tourist
7 0 1

Sure!

Page link is:

https://grupogalatae.com/products/balsamo-capilar-cabellos-rubios-limon-y-miel

2021-03-29_16-22-51.png

If you need anything else, just let me know.

ZestardTech
Shopify Expert
5429 978 1303

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-product [data-image-loading-animation] {
background-color: transparent !important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Jorgemm
Tourist
7 0 1

It worked.

Issue solved.

 

Thank you very much! Very appreciated! 🙂

ZestardTech
Shopify Expert
5429 978 1303

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
KWillowLLC
New Member
5 0 0

Hi! I am having the same issue and could use your help with this, please! I tried pasting in the following code right after this code from my Debut theme. Did I paste this in correctly? My logo is still showing up with gray background. What am I doing wrong?

 

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}.template-product [data-image-loading-animation] {
background-color: transparent !important;
}

}

Orthophemisms
Visitor
1 0 0

Hello ZestardTech!

 

It appears this issue may have changed some since the solution was posted 3-30-21

 

Any chance you can attempt/repeat/revise the process in today's environment and update the process path instructions?

 

Thank you!