Dawn 2.0 - Need to change background color of only collection pages

Store Design
, ,
1

Hello, I want to change the color of some backgrounds in some collection pages, not the header or footer color. Please explain how to do this on the custom css of each collection page. Looking to have color #DFD8CF.

thank you!

2

To change the background color of specific collection pages in Shopify using custom CSS, you can follow these steps:

  1. From your Shopify admin, go to “Online Store” and then click on “Themes.”
  2. Locate the theme you’re using and click on the “Customize” button to access the theme editor.
  3. In the theme editor, look for the option to add custom CSS. This may be labeled as “Customize theme,” “Additional CSS,” or something similar. Click on it to open the custom CSS editor.
  4. In the custom CSS editor, add the following CSS code:
body.template-collection-handle {
  background-color: #DFD8CF;
}
​

Replace collection-handle in template-collection-handle with the handle of the collection page you want to target. For example, if the handle of the collection is “shirts,” the CSS selector would be body.template-collection-shirts.

  1. Save the changes and exit the theme editor.
  2. Repeat these steps for each collection page you want to modify, replacing the CSS selector with the appropriate collection handle.

The CSS code above targets the body element of the specific collection pages based on their template. It sets the background-color property to the desired color, #DFD8CF. This will change the background color of the targeted collection pages.

3

Hello, thank you for the help but it did not work. Any other idea?

4

Hi @settolive
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

5

Hello,

www.settolive.com

gaicai

thanks!

6

Hi @settolive ,

Is this the result you want - We try to edit the background colors of some product-cards

BSSCommerce_0-1684211455164.png
BSSCommerce_0-1684211455164.png1759×926 312 KB

To do this, You need to follow these steps:

Step 1: Go to: online store => themes => edit code

BSSCommerce_1-1684211512192.png
BSSCommerce_1-1684211512192.png1752×892 171 KB

Step 2: Find the file base.css and paste the following code in it

/* start bss fix */
.grid__item:has(#title-template--18720610877747__product-grid-8233653829939),
.grid__item:has(#title-template--18720610877747__product-grid-8274433605939) {
background-color: #DFD8CF;
}

/* end bss fix */

Note: The parts in brackets “title-template–18720610877747__product-grid-8233653829939” are the cards you want to select.

Example:

BSSCommerce_2-1684211641170.png
BSSCommerce_2-1684211641170.png1812×926 426 KB

You can also find and add some variables by entering a line of code like this

/* start bss fix */
.grid__item:has(#title-template--18720610877747__product-grid-8233653829939),
.grid__item:has(#title-template--18720610877747__product-grid-8274433605939),
.grid__item:has(

Hope this suggestion can help you.
7

Hello! Thank you for above but no, I want to change is the white page body background, not the product card. Can you help me with this?

8

To fix the white background color in the Collection Page you need to add the following CSS code at the end of the base.css file

/* start bss fix */
#ProductGridContainer {
    background-color: #DFD8CF;
}
/* end bss fix */

Result:

BSSCommerce_0-1684377292839.png
BSSCommerce_0-1684377292839.png1760×930 320 KB

Hope this suggestion can help you.