Solved

Change Product Background to Grey but only for my Homepage

DFSouth
Excursionist
28 0 4

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. 

 

DFSouth_0-1704332283908.png

 

DFSouth_1-1704332466142.png

Here are the proof/things that I wanna do the same from other companies:

 

DFSouth_2-1704332770029.png

 

DFSouth_3-1704332823505.png

 

 

Accepted Solution (1)
iffikhan30
Shopify Partner
237 35 43

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.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp

View solution in original post

Replies 16 (16)

iffikhan30
Shopify Partner
237 35 43

Hello @DFSouth ,

 

I check you website. Your images are not PNG format first you can do images Png format then apply the color.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
DFSouth
Excursionist
28 0 4

Hi, all my images are PNG before. What do you mean by not PNG cause I downloaded from Canva PNG.

iffikhan30
Shopify Partner
237 35 43

Hello,

 

I mean that, you photos have background color white, on PNG behavior without background, you can remove white background. 

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
DFSouth
Excursionist
28 0 4

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.

iffikhan30
Shopify Partner
237 35 43

Hello,

 

You upload transparent background image and give me the link of product I will show you.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
DFSouth
Excursionist
28 0 4

DFSouth_0-1705023562448.png

DFSouth_1-1705023601887.png

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

 

DFSouth
Excursionist
28 0 4

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: 

 

DFSouth_0-1705025023593.png

DFSouth_1-1705025349022.png

DFSouth_2-1705025433190.png

 

iffikhan30
Shopify Partner
237 35 43

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

iffikhan30_0-1705062040807.png

 

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
DFSouth
Excursionist
28 0 4

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.

 

DFSouth_0-1705279532805.pngDFSouth_1-1705279564949.png

 

iffikhan30
Shopify Partner
237 35 43

Hello @DFSouth ,

 

I check your view all bag page, this is not my CSS code you add by yourself or your developer, 

 

iffikhan30_0-1705296381975.png

 

 

Ok you can remove the background and issue will be resolved.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
DFSouth
Excursionist
28 0 4

Hi Iffikhan30,

 

I believe that I did put your code at the end of the base.css. Here: 

DFSouth_0-1705358746881.png

So what should I do now? Should I still keep the transparent PNG image or what?  And how can I remove the background ?

 

Thanks

DFSouth
Excursionist
28 0 4

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? 

DFSouth_1-1705359173848.png

 

iffikhan30
Shopify Partner
237 35 43

Hello @DFSouth ,

 

No no not whole just delete backgroud-color link.

 

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
DFSouth
Excursionist
28 0 4

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 

iffikhan30
Shopify Partner
237 35 43

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.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
DFSouth
Excursionist
28 0 4

Thanks, I already fixed.