Changing background color for a collection

Store Design
1

Hey guys, new account with a quick question. I’m designing the landing page for a store I recently opened, and I’m trying to change the background colors of the collections to match the background color of the website. I changed the images background to opaque but the images now have a white background instead of matching the website background color. I’m quite new to Shopify so any help would be majorly appreciated, thank you!

2

Hey @failedaura

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hey @failedaura,

Welcome to Shopify Community. Would you like to share the store url and password [if applicable] so that I can take a look and provide you with the solution code.
Thanks

5

Hi @failedaura ,

Could you please provide me with the URL of your store and the password? This will allow me to take a closer look and assist you more effectively.

Looking forward to your reply!

Best,
Felix

6

Hi @failedaura,

Please send the website link, I will check it for you

7

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.

8

Hi,

Hope this will help

  • Option A — Best fix: use transparent images (recommended)
  • Option B — Quick CSS fix at theme CSS file

CSS example

/* Set collection card background to match the site */
.collection-card,
.collection-grid__item,
.card {
  background-color: #f7f6f5; /* <-- replace with your site's background color */
}

/* Make sure the image itself is not adding extra background/padding */
.collection-card img,
.collection-grid__item img,
.card img {
  background-color: transparent;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
  • Option C — CSS trick to “remove” white background (only if you can’t change images)

CSS example

/* Use with caution: may alter image colors */
.collection-card img {
  background-color: #f7f6f5; /* your site background */
  mix-blend-mode: multiply;
}
9

You can fix this by editing the collection section in your theme editor. Try removing the white background in the image itself (make it transparent) and then adjust the section background color in your Shopify theme settings to match your site’s main background. That should blend everything smoothly.