Shopify themes, liquid, logos, and UX
Solved! Go to the solution
This is an accepted solution.
Is this your store? then add this css in asset->theme.scss file at bottom:
#CollectionSection .grid-uniform .lazyload__image-wrapper{background: #e2e0e0;}
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.
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?
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
Send me store url and let me know on which section you want to change background color on product page?
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
This is an accepted solution.
Is this your store? then add this css in asset->theme.scss file at bottom:
#CollectionSection .grid-uniform .lazyload__image-wrapper{background: #e2e0e0;}
Thank you so much it worked!! im very grateful for your help!
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.
🙂
Add this:
{% if template contains 'product' %}
<style>
.body{background-color: gray;}
</style>
{% endif %}
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?
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 %}
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 🙂
Then you can replace your image selector with 'your_image_selector'.
{% if template contains 'product' %}
<style>
your_image_selector{background-color: gray;}
</style>
{% endif %}
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.
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/
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 %}
I tried that.
{% if template contains 'product' %}
<style>
.body{background-color: white;}
</style>
{% endif %}
I am trying to remove the color behind the images..
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/
Add this css:
.product-card .product-card__image-with-placeholder-wrapper {
background: transparent !important;
}
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.
you can add in any css file
@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.
want to change homepage product grid background color?
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.
add this code in asset/base.css at bottom
.card-information+.card{background: #C7C0C0;}
@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!
Use this code:
.pwzrjss3,.pwzrjss111{background: #C7C0C0;}
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.
Yes add in same file in new line
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
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;}
so because my images are not transparent it's not possible right?
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
I can see its working
try this and you can change color as you want
.template-product{ background: #8080804d !important;}
Thank you, where do I paste this code?
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.
we can place color but it will not display because image not transparent
is there any app that makes images transparent? But bulk edit not one by one>
Hi there
I'm having the same issue. please can someone help me.
Send me store url will check
Hi there
its
Skiandsportretail.co.uk
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
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?
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
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024