FROM CACHE - en_header

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

Solved
kaat86
Tourist
6 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)

Accepted Solutions
Jasoliya
Shopify Expert
4522 586 1138

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 37 (37)
Jasoliya
Shopify Expert
4522 586 1138

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
kaat86
Tourist
6 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
6 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
4522 586 1138

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
kaat86
Tourist
6 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
4522 586 1138

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
kaat86
Tourist
6 0 0

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

ClarkHook
New Member
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
6 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!
A87
New Member
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
4522 586 1138

Add this:

{% if template contains 'product' %}
<style>
    .body{background-color: gray;}
</style>
{% endif %}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
A87
New Member
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
4522 586 1138

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
A87
New Member
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
4522 586 1138

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
fashionnably
New Member
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
New Member
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
4522 586 1138

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
thenonis
New Member
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..