Shopify themes, liquid, logos, and UX
Hi, I have a question for the product background. I'm using a Dawn Version 12.0.0 Theme and building a Homepage with a page plug in, Gempages Builder. On that homepage, I want to change all the products shown as grey background or grey cart but not changing any images from those products. I mean I want to keep the same thing for the product images and other product pages as white background. But for for the homepage, I want first product images shown with grey background like other fashion ecommerce sites doing with proof below. How can I do that? Thanks.
This is my homepage: https://dfsouth.com.au/ and you can see products shown on my homepage that I wanna make grey background for their first image.
Here are the proof/things that I wanna do the same from other companies:
Solved! Go to the solution
This is an accepted solution.
Hello,
I told you last comment just delete background-color line that's it,
1) Go to online store
2) Edit code
3) search base.css
then I show picture on line number.
Hello @DFSouth ,
I check you website. Your images are not PNG format first you can do images Png format then apply the color.
Hi, all my images are PNG before. What do you mean by not PNG cause I downloaded from Canva PNG.
Hello,
I mean that, you photos have background color white, on PNG behavior without background, you can remove white background.
Hi Iffikhan30,
You mean I should post them with transparent background rather than with white background for product images? Last time I tried to pose the transparent background already but it doesn't work tho.
Hello,
You upload transparent background image and give me the link of product I will show you.
Hi Iffikhan30,
I just downloaded the PNG transparent version and put it in the Shopify system for the first picture of this Gucci item. However. the homepage still havent got that grey background like others yet. Here is my homepage: https://dfsouth.com.au/.
And this is the product link for the first item in the best seller category: https://dfsouth.com.au/products/ophidia-large-gg-tote-bag.
Hi,
I saw the difference on the collection page for the grey background but that's not my plan. The point is I only want to have grey background ONLY ON MY HOMEPAGE, the rest should be white. Is there anyway that I can do that? Btw, I'm using a page builder plugin, named GemPages Builder but they don't have the function to appear the grey background colour on homepage like others. If you have a look at other websites, like Farfetch they only show grey background in the homepage but when we click on to the product page or collection page, they are still with white, which is what I want. Here are some reference pictures:
Hello @DFSouth ,
If this your not plan but what png image to achieve this task,
1) First you PNG images
2) Only featured collection add background to add this css you problem has been resolved no need extra app.
div#gp-carousel-product-list-carousel-gNfSZnpe1O-template--15912541225199__gp_section_495606397359096968 .gem-slider > div {
background: #000 !important;
}
Become
Hi,
I did put your code in the base.css and it works. However, the thing I wanna do is showing the product background as grey colour #fafafa ONLY ON MY HOMEPAGE. For the rest of other pages, it should be white/transparent. Is there anyway to stop showing grey colour background on other pages?. Thanks.
Hello @DFSouth ,
I check your view all bag page, this is not my CSS code you add by yourself or your developer,
Ok you can remove the background and issue will be resolved.
Hi Iffikhan30,
I believe that I did put your code at the end of the base.css. Here:
So what should I do now? Should I still keep the transparent PNG image or what? And how can I remove the background ?
Thanks
Hi Iffikhan30,
So I should remove the background which means deleting this whole code, that i highlighted from 279 to 286 out of the base.css and it's gonna work?
Hi Ifffikhan30,
How can I delete the background-color link? In the picture I sent to you, is there any code that I need to delete or just keep the same?
Thanks
This is an accepted solution.
Hello,
I told you last comment just delete background-color line that's it,
1) Go to online store
2) Edit code
3) search base.css
then I show picture on line number.
Thanks, I already fixed.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024