Solved

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

kaat86
Tourist
7 0 0
Goodevening, I just can't seem to find out how to change the background color behind my products. My products are with no background so it takes the background of the page. Now my homepage has a white background and I know how to change that and the rest that changes automatically aswell. I want to keep the background white as well on my products page but want to have the background of my products light grey. Is this possible? Thank you for all your time and help.
Accepted Solution (1)
Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

https://ohlord.us/

Is this your store? then add this css in asset->theme.scss file at bottom:

#CollectionSection .grid-uniform .lazyload__image-wrapper{background: #e2e0e0;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 46 (46)

Jasoliya
Shopify Expert
4808 621 1217

Hi @kaat86 

You have to add your css i such condition like below:

Add this code in Layout->theme.liquid file just before </body>

 

{% if template contains 'product' %}
<style>
    .your_section_selector{background-color: gray;}
</style>
{% endif %}

Note: Change your_section_selector to your section.

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
kaat86
Tourist
7 0 0

Thank you so much for the fast response.

Im very new to this so the first part I could do, but I don't know how to do the following:

 

Note: Change your_section_selector to your section.

 

How do I find out what the section is called ore should i not type it in stead of your_section_selector?

kaat86
Tourist
7 0 0

Thank you so much for the fast response.

Im very new to this so the first part I could do, but I don't know how to do the following:

 

Note: Change your_section_selector to your section.

 

How do I find out what the section is called ore should i not type it in stead of your_section_selector

Jasoliya
Shopify Expert
4808 621 1217

Send me store url and let me know on which section you want to change background color on product page? 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
kaat86
Tourist
7 0 0

Thank you so much, so here is the link and some examples of what I want it to look like. I want this for every collection so women,men, baby& kids and accessories all in the same lightgrey #e2e0e0 .

Thank you for your time!

 

 

 

https://ohlord.us/collections/man

grey background products.pnggrey backgrounds.png

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

https://ohlord.us/

Is this your store? then add this css in asset->theme.scss file at bottom:

#CollectionSection .grid-uniform .lazyload__image-wrapper{background: #e2e0e0;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
kaat86
Tourist
7 0 0

Thank you so much it worked!! im very grateful for your help!

A87
Visitor
3 0 0

Hey there, 

 

I would like to change the background color of products in the product page. I have a lot of products and would like to do it in bulk, for example if theres a code I should type in the theme or something. I would appreciate it if anyone can help. 

🙂

Jasoliya
Shopify Expert
4808 621 1217

Add this:

{% if template contains 'product' %}
<style>
    .body{background-color: gray;}
</style>
{% endif %}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
A87
Visitor
3 0 0

I did, nothing happened, I went through the previous steps you provided aswell, but nothing changed. 

Can you provide a specific and precise explanation please? 

Jasoliya
Shopify Expert
4808 621 1217

Sorry it was my mistack try this

Add this code in theme.liquid just before </body>

{% if template contains 'product' %}
<style>
    body{background-color: gray;}
</style>
{% endif %}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
A87
Visitor
3 0 0

Hello there, 

 

Tried it , the whole page turned to grey except for the product image itself. I kind of want the opposite. I want the image background to turn to grey and not the way around 🙂

 

Jasoliya
Shopify Expert
4808 621 1217

Then you can replace  your image selector with 'your_image_selector'.

{% if template contains 'product' %}
<style>
    your_image_selector{background-color: gray;}
</style>
{% endif %}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
fashionnably
Visitor
1 0 0

I am looking to do the same thing. The code is not working. I would like all my photo images to have a light gray background.

thenonis
Visitor
3 0 0

This did not work for me.. I tried what you provided and 

#shopify-section-collection .grid__item {background: #ffffff;}

My site is https://malia-kai-boutique.myshopify.com/

Jasoliya
Shopify Expert
4808 621 1217

If you want to change whole product background color then use this:

add this code in layout/theme.liquid

{% if template contains 'product' %}
<style>
    .body{background-color: gray;}
</style>
{% endif %}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
thenonis
Visitor
3 0 0

I tried that. 

{% if template contains 'product' %}
<style>
.body{background-color: white;}
</style>
{% endif %}

I am trying to remove the color behind the images.. 

thenonis
Visitor
3 0 0

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/

Jasoliya
Shopify Expert
4808 621 1217

Add this css:

.product-card .product-card__image-with-placeholder-wrapper {
    background: transparent !important;
}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Zlata
Excursionist
14 0 3

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.

Jasoliya
Shopify Expert
4808 621 1217

you can add in any css file 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Zlata
Excursionist
14 0 3

@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. 

Jasoliya
Shopify Expert
4808 621 1217

want to change homepage product grid background color?

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Zlata
Excursionist
14 0 3

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

Jasoliya
Shopify Expert
4808 621 1217

add this code in asset/base.css at bottom

.card-information+.card{background: #C7C0C0;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Zlata
Excursionist
14 0 3

@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

Jasoliya
Shopify Expert
4808 621 1217

Use this code:

 

.pwzrjss3,.pwzrjss111{background: #C7C0C0;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Zlata
Excursionist
14 0 3

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.

Jasoliya
Shopify Expert
4808 621 1217

Yes add in same file in new line

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Zlata
Excursionist
14 0 3

It worked!!

 

 

Really, thank you so much @Jasoliya 

Sport-e
Visitor
3 0 0

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

Jasoliya
Shopify Expert
4808 621 1217

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;}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Sport-e
Visitor
3 0 0

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

Harrison_b77
Shopify Partner
4 0 2

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

Jasoliya
Shopify Expert
4808 621 1217

I can see its working

try this and you can change color as you want

 

 

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

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Harrison_b77
Shopify Partner
4 0 2

Thank you, where do I paste this code?

ClarkHook
Visitor
1 0 0

I have the same question. I tried both code edits shown in this post with no success. Any other things I should try? Using Debut theme.

kaat86
Tourist
7 0 0
I ended up Having one of the Experts help me and the codes did work for me
aswel. Maybe post the question again and I'm sure they will help you too!
Sorry I can not be of any more help. Good luck with your store!

Jasoliya
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Sport-e
Visitor
3 0 0

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

Ski6284
Visitor
3 0 0

Hi there 

I'm having the same issue. please can someone help me. 

Jasoliya
Shopify Expert
4808 621 1217

Send me store url will check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Ski6284
Visitor
3 0 0

Hi there 

 

its 

Skiandsportretail.co.uk

 

Jasoliya
Shopify Expert
4808 621 1217

As per this we have to do code in theme cant send you css for that

if want me to do then add me staff email is in my bio below  will do change product page background Or om me

Best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
SeeJoy
Visitor
1 0 0

Jasoliya,

 

I tried each of the code snippets but none of them seem to work. I might be not putting in the correct place. but if you look at the main page in the collections area - I want all the background to have a grey or another color that is not white. Is that possible?

www.seejoycreative.com

 

Jasoliya
Shopify Expert
4808 621 1217

Hi, i can see you have already whole home page have same background color, for product grid section its because you have white background image 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here