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

[kaat86]

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.

[Jasoliya]

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.

[kaat86]

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]

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]

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

[kaat86]

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

[Jasoliya · 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;}

[kaat86]

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

[ClarkHook]

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]

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]

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]

Add this:

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

[A87]

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]

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

[A87]

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]

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

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

[fashionnably]

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]

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]

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

[thenonis]

I tried that. 

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

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