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

PIETRAVIVADEV · ‎03-12-2024

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

Sweet_Savior_3 · ‎03-12-2024

Hello @PIETRAVIVADEV

Welcome to Shopify Community.

Please paste the given CSS in base.css file.

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

OUTPUT:

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 · ‎03-12-2024

This didn't worked 😞

Sweet_Savior_3 · ‎03-12-2024

@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 · ‎03-12-2024

this didnt worked 😞

Sweet_Savior_3 · ‎03-12-2024

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 · ‎03-12-2024

MyCityTeez · ‎06-24-2024

Could a similar code line input also work if pasted into my "North" template for a specific section of my homepage, where I had a custom widget created (.liquid, .css, .js aka json files created to make the widget), with the only difference being I want the section to have a black background that showcases my transparent images within it? Any guidance would be appreciated!

ThePrimeWeb · ‎03-12-2024

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.

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 · ‎03-12-2024

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:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PIETRAVIVADEV · ‎03-12-2024

This didnt worked 😞

Made4uo-Ribe · ‎03-12-2024

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PIETRAVIVADEV · ‎03-12-2024

sorry this didnt worked either! 😞

Made4uo-Ribe · ‎03-12-2024

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PIETRAVIVADEV · ‎03-12-2024

Sorry this didnt worked either 😞

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

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

☕Buy me a coffee☕

Community Blog Articles