How can I alter the background color of my collection list?

Store Design
,
1

Hello I would like to change the background colour of the collection list categories in the refresh theme to white.

collection list.png
collection list.png1365Ă—770 157 KB

1 Like
2

@sharaiz add below css into base.css file

@media (min-width:750px)
{
.section-template--15619004596276__product-grid-padding {
    padding-top: 0px;
    padding-bottom: 60px;
    background-color: white !important;
}
}
3

still not working

4

@sharaiz CAN you share your store url?

5

www.sonashi.pk

6

@sharaiz Try below one

@media (min-width:750px)
{
.section-template--19099649999144__product-grid-padding {
    padding-top: 0px;
    padding-bottom: 60px;
    background-color: white !important;
}
}

Ujjaval_0-1685966117465.png
Ujjaval_0-1685966117465.png1600Ă—776 133 KB

7

Hi @sharaiz ,

I understand that you want to change the background colour of the collection list categories in the refresh theme to white. Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
div#shopify-section-template--19099649999144__product-grid {
    background: white;
}
8

@sharaiz

Please add the following CSS code to your assets/base.css bottom of the file.

@media (min-width:750px){
.section-template--19099649999144__product-grid-padding {
    padding-top: 0px;
    padding-bottom: 60px;
    background-color: white !important;
}
}

Thanks!

9

Thank you it worked!

10

It worked on collection page but facing same problem for product page now !!

11

How can i change background colour to white in product page.

1 Like
12

Try this one.

section#shopify-section-template--19099650523432__main {
    background: white;
}

Result:

Ribe_Dagandara_0-1685988743886.png
Ribe_Dagandara_0-1685988743886.png1314Ă—600 120 KB

I hope it help.

1 Like
13

Where shall i add this code? Mean in which section ?

1 Like
14

Hi, you can paste it on the section-main-products.css file.

1 Like
15

Although code is added but the color is changed back to grey. can you check and let me know the solution

www.sonashi.pk