How to change the product page background color in Debut theme?

Excursionist
24 0 1

Hi everyone,

 

I am using the Debut theme. I preferred my landing page/home page in black color so I change the background color to black. All the other pages were changed automatically to black background but I want my catalogue/product page to be white.

 

The shop link is https://angstrom-watches.myshopify.com

 

How can I do this? Anyone?

 

Thank you.

 

Regards,

Chris

0 Likes

Each page has a unique class. E.g. the product page has a class of `.template-product`. So you can use CSS to change the background colour to the pages you don't want with a background colour of black. Or use `.template-index` if you just want the homepage to be black.

Developer for Crafty Party Box
0 Likes
Excursionist
24 0 1

Hi.

 

Can you elaborate more of this?

 

I am new to Shopify and providing the code and where to put it would be really helpful to me.

 

Thank you.

0 Likes
Sorry, are you familiar with editing the code? Or are you using the theme colour settings in the visual editor?
Developer for Crafty Party Box
0 Likes
Excursionist
24 0 1
Hi.

I did use the theme colour settings in the visual editor. The problem with it is if I selected black as a background, every page will also turn into a black background including the collection/product page. I wouldn’t mind that all the other pages are black background but I want my collection/product page to be WHITE.

How can I do this?

Also yes I am familiar with the code. I just don’t know what code to put and where to put it to get the collection/product page to be white.

0 Likes
Highlighted

Ok, so you will need to add something like this to the theme.scss file:

 

.template-collection,
.template-product {
  background-color: white;
  color: black;

  * {
    color: black;
  } 
}
Developer for Crafty Party Box
0 Likes
Excursionist
24 0 1
Should I add that code at the end?
0 Likes
I usually put mine at the bottom. That way it’s easier to find your own custom stuff.
Developer for Crafty Party Box
0 Likes
Excursionist
24 0 1

Hi.

 

I tried this and it worked. The background changed to white and the font changed to black. However, the font color on the navigation button at the top changed to black too therefore making it invisible as the background color of my main navigation is black.

 

 

0 Likes
Yeah so that the problem you’ll face. The selector is not specific enough to override the black colour. You can add a more specific selector if you get the class of the title. But it will get messy.

Don’t know if anyone else has any ideas?
Developer for Crafty Party Box
0 Likes