Change background color behind image only on collection list

Change background color behind image only on collection list

HTX-Fluid-Power
Excursionist
17 0 3

Would it be possible to have the background color behind the image section in a collection list be white as a standard?  I would prefer this as a default as some images do not have a background color and would prefer not to have to add white background to images each time before uploading.

 

For images with no background, it shows up like this based on the color scheme.  The collection image below has no background and would like it to be set to white.  I believe the background is going off the button background color.

HTXFluidPower_0-1734929436055.png

This is how I want all of my collection items to appear.  For the collection below, the image already had a white background.

HTXFluidPower_1-1734929512266.png

 

 

Replies 4 (4)

Moeed
Shopify Partner
6614 1788 2173

Hey @HTX-Fluid-Power 

 

Share your store URL and Password if enabled.

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


HTX-Fluid-Power
Excursionist
17 0 3

Site is not password protected.  Link below to a collection example.

Quick Couplings – HTX Fluid Power

Moeed
Shopify Partner
6614 1788 2173

Hey @HTX-Fluid-Power 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__inner.ratio {
    background: white !important;
}
</style>

RESULT:

Moeed_0-1734931151146.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


DaisyVo
Shopify Partner
2834 339 394

Hi @HTX-Fluid-Power 

 

I hope you are well. You can follow our instructions below:


Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

 

Here is the code for Step 3:

 

.card.card--card.card--media .card__inner {
    background: white !important;
}

 

 

image (46).png


Please let me know if it works. Thank you!

 

Best,
Daisy - Avada Support Team.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution