Changing Transparent Background Color of Product Images to Match Site Background on Shopify

PIETRAVIVADEV
Tourist
7 0 2

Hi, I'm working on the product section of my Shopify site and I've encountered an issue I need help with. My product images have transparent backgrounds, and I want these backgrounds to appear white, matching the white background of my site. However, currently, they display as a cream color instead of white. How can I change this so the background of these transparent images appears white to blend seamlessly with my site's background color? Any guidance would be greatly appreciated!

 

This is the site: https://ad22c9-4.myshopify.com/collections/todos-los-productos?page=2

 

FYI IM IN DAWN 13.0.1

 

 

 

 

Replies 13 (13)

Sweet_Savior_3
Shopify Partner
1070 88 96

Hello @PIETRAVIVADEV 

 

Welcome to Shopify Community.

 

Please paste the given CSS in base.css file.

.card__media .media img {
background: #fff;
}

 

OUTPUT:

Sweet_Savior_3_0-1710262663325.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
PIETRAVIVADEV
Tourist
7 0 2

This didn't worked 😞

Sweet_Savior_3
Shopify Partner
1070 88 96

@PIETRAVIVADEV 

 

Oh, then follow below steps:

1. Open theme.liquid

2. Search for </head> tag and paste the below code above it.

<style>
body .card__media .media img {
  background: #fff !important;;
}
</style>

3. Save

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
PIETRAVIVADEV
Tourist
7 0 2

this didnt worked 😞

Sweet_Savior_3
Shopify Partner
1070 88 96

Can you show the screenshot of the code you added ?

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
PIETRAVIVADEV
Tourist
7 0 2

head.png

ThePrimeWeb
Shopify Partner
1838 520 392

Hey @PIETRAVIVADEV,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.card__media .media {
    background: white !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710263013555.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Made4uo-Ribe
Shopify Partner
5571 1340 1654

Hi @PIETRAVIVADEV 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.collection .media--transparent {
    background-color: white;
} 

 

And save. 

result:

Made4uoRibe_0-1710264046157.png

 

 

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. 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.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PIETRAVIVADEV
Tourist
7 0 2

This didnt worked 😞

Made4uo-Ribe
Shopify Partner
5571 1340 1654

Try to add !important, this one. 

 

.collection .media--transparent {
    background-color: white !important;
} 

 

And Save.

 

Please don't forget to Like and Mark Solution to the post that helped you. 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.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PIETRAVIVADEV
Tourist
7 0 2

sorry this didnt worked either! 😞

Made4uo-Ribe
Shopify Partner
5571 1340 1654

Try to paste into other css.file. 

component-card.css find this one in your Asset folder. Please dont forget to save and refresh the browser.

So youll see the changes.

 

Please don't forget to Like and Mark Solution to the post that helped you. 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.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PIETRAVIVADEV
Tourist
7 0 2

Sorry this didnt worked either 😞