Change the background color of products( not the whole page)

Store Design
21

I think the problem with these solutions is that what is confusing about this change is which section selector to use..

I have literally used everything.

.product-card

#shopify-section-collection

.product-card__image-with-placeholder-wrapper

.grid-view-item__image-wrapper .product-card__image-wrapper

I mean. Im looking for the selector that has a grey background and I cant find it… As you can see with my site.. I am trying to remove the grey, not add it. https://malia-kai-boutique.myshopify.com/

22

Add this css:

.product-card .product-card__image-with-placeholder-wrapper {
    background: transparent !important;
}
23

Hi @Jasoliya

i have the same exact inquiry. I do not have assets - theme.scss file to insert the code into.
is there another alternative?

thank you.

24

you can add in any css file

25

@Jasoliya It doesn’t work. I tried everything already.
can you please have a look www.hearts-out.com (stewnt)

if you can edit code i would love to have #C7C0C0 applied as background to all the products and thumbnails.

26

want to change homepage product grid background color?

27

Yes, product grid and each product page, so every product image has grey background with hex code above.

this is an example of how i want products to look.

CCA2F2DB-63BA-4F6E-BB45-2D97263448EB.jpeg
CCA2F2DB-63BA-4F6E-BB45-2D97263448EB.jpeg1125×823 35.5 KB

28

add this code in asset/base.css at bottom

.card-information+.card{background: #C7C0C0;}
1 Like
29

@Jasoliya YOU ARE A GENIUS! It applied to my product grid but didn’t apply to when I click on each product and open it individually. How do I apply the same here for the main product and thumbnails so it looks like the image attached? Thank you so so much!

Screen Shot 2022-02-04 at 12.03.36 PM copy.png
Screen Shot 2022-02-04 at 12.03.36 PM copy.png2880×1800 274 KB

30

Use this code:

.pwzrjss3,.pwzrjss111{background: #C7C0C0;}
1 Like
31

Hi @Jasoliya do i use it together with the previous code or should i just remove the other one? Also, is it for the same base.css file?
thank you.

32

Yes add in same file in new line

33

It worked!!

Really, thank you so much @Jasoliya

34

Hello, Jasoliya I have tried everythingof the above but my background color in product images does not change . I dont know what else to do . Is there any chance you could help me ? I would really appreciate it. My website is www.sport-e.gr and i want to make the product image have light grey background color but for all product images not just for one. Thanks in advance

35

Hi @Sport-e

s your images are not transparent it will not show background color,

for product page background color change follow this

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file
.template-product{    background: #8080804d;}
36

so because my images are not transparent it’s not possible right?

37

we can place color but it will not display because image not transparent

38

is there any app that makes images transparent? But bulk edit not one by one>

39

Hi @Jasoliya

I have tried all of the code snippets you’ve put in above and non of them seem to work.

The website im working on is https://dripunion.com/

Hope you can help

40

I can see its working

try this and you can change color as you want

.template-product{    background: #8080804d !important;}