How to change the page background color and add a different color to the product list section

[aswik]

I want to change the home page background color an make the featured products section to highlight, similar to the attatched image. the section width should be only 80%.

[websensepro]

Hi @aswik

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.collection {
    background-color: #ECF0F1 !important;
}
.grid.product-grid {
    padding: 10px !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[DaisyVo]

Hi @aswik

If you are using Dawn theme, you can follow these steps:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.collection {
    background: green !important;
}

Here is the result:

If you are not using Dawn theme, please share with me your store URL/ preview and password so that I can check.

Look forward to your response!

Best,

Daisy

[aswik]

If we directly change the color here is how it looks.

but i wanted it to look like this.

STORE URL - https://jivakart.in/

[aswik]

STORE URL - https://jivakart.in/

[websensepro]

@aswik

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.collection {
    background-color: #ECF0F1 !important;
}
.grid.product-grid {
    background: #ffff !important;
    padding: 10px;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[aswik]

one more help please… How to add that heading also inside that white grid

[websensepro]

@aswik

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:769px){
h2.title.inline-richtext.h2 {
    position: absolute;
    top: 42px;
    left: 76px;
    z-index: 111111;
}
.grid.product-grid {
    padding-top: 47px !important;
    position: relative;
}

@media(max-width:768px){
   h2.title.inline-richtext.h2 {
    position: absolute;
    top: 42px;
    left: 35px;
    z-index: 111111;
}
}

Result:

If my reply is helpful, kindly again click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[aswik]

This is what happening when I paste that code!

[websensepro]

The code I just provided, please remove it.

[websensepro]

Remove this code quickly, then I’ll correct it and give it back to you.

[websensepro]

Bro, I can move the heading into the white grid, but when people open the website on different devices, the layout might get messed up. So, my advice is not to move the heading into the white grid.

[aswik]

But the only thing is.., I don’t want this design on mobile screen… Can you please help me with this one thing alone.

On mobile screen page color should be white itself like before.

[websensepro]

@aswik

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-widht:767px){
.collection {
        background-color: #FFFF !important;
    }
}

If my reply is helpful, kindly again click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!