How can I change the background color of my product images?

Solved

How can I change the background color of my product images?

JamessyB
Excursionist
14 2 5

I will be uploading my product images with a transparent background.

I am using my theme colour for the product tile background which is a light grey.

This looks great on the product tiles when a customer is looking at all the products, however, when hey click on a specific product the background of the image is back to white. I have looked in the setting but am unable to change this?

Accepted Solution (1)

JamessyB
Excursionist
14 2 5

This is an accepted solution.

I have managed to figure it out (for DAWN theme at least)

 

In code editor go to base.css and around line 2839 you will see the code below, change background colour to your desired colour. I changed mine to #f3f3f3 to match my theme.

 

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: #f3f3f3;
}

 

If you have carousel for your images, then go to code editor  andgo to section-main-product.css and around line 1119 you will see the code below. Again change the colour to your desired colour.

 

.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  color: rgb(var(--color-base-text));
  cursor: pointer;
  background-color: #f3f3f3;
}

Hope this helps anyone with the same issue

  

View solution in original post

Replies 5 (5)
JamessyB
Excursionist
14 2 5

I did think about doing this in Canva, having every image with the same default colour but I was hoping there would be an option to code it in to be honest. Thank you for the offer but I would be able to do that myself with the software I have. Thank you though

JamessyB
Excursionist
14 2 5

Hey, Thanks for your reply. Im trying to change the product background once a customer is viewing a product. Currently, when a customer is scrolling through my grid of products. The tile is grey (theme setting change) which I am happy with. However, when the customer clicks on a specific product. All of the images revert back to a white background. Does that make sense? Not sure how well I have explained it. Thanks

JamessyB
Excursionist
14 2 5

This is an accepted solution.

I have managed to figure it out (for DAWN theme at least)

 

In code editor go to base.css and around line 2839 you will see the code below, change background colour to your desired colour. I changed mine to #f3f3f3 to match my theme.

 

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: #f3f3f3;
}

 

If you have carousel for your images, then go to code editor  andgo to section-main-product.css and around line 1119 you will see the code below. Again change the colour to your desired colour.

 

.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  color: rgb(var(--color-base-text));
  cursor: pointer;
  background-color: #f3f3f3;
}

Hope this helps anyone with the same issue

  

tahu
Visitor
3 0 0

This works for the product page but not for product cards on collection page or home page. Can you help with that?

50KASHFLOW
Visitor
1 0 0

For novices like me, please note ".CSS" files are found in the ASSETS Folder.