Dawn theme: How do I change background color for product pages/featured collection/etc/?

Store Design
,

Topic summary

A user seeks to change the background color specifically for product pages in Shopify’s Dawn theme without affecting the entire site.

Initial Problem:

  • Standard CSS solutions (like body background-color) weren’t working
  • Using div { background-color: #ff0000; } caused product images to disappear

Working Solution:
After troubleshooting with screenshots showing two layout options, the following CSS code successfully changed the product page background:

main#MainContent:has(.product) {
    background: #ff0000;
}

This is added through Theme → Customize → Product page → Custom CSS box.

Ongoing Issues:

  • Another user reports collection images appearing behind the background (text visible, images hidden) when applying similar code
  • A third user cannot match product page colors to their site despite trying posted solutions

The discussion remains open with unresolved cases requiring store-specific troubleshooting.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I’ve scoured the web and tried every possible solution I could find but no luck. I installed Dawn yesterday 2/28/2023, though I’m not a newbie with Shopify.

I want to be able to change the background color only for my product pages, and perhaps the background color of featured collections, but not change the color for the whole site.

Does anyone know how I might accomplish this?

Thanks in advance for any advice.

2

Hi @killerpresets ,

This is Mike from Omega

If you only want to change the background color for only Featured Collection section, you can try my solution:

  1. Theme → Customize theme

  2. Select Product page

  3. Paste this CSS code into Custom CSS box and Save

MikeOmega_0-1677546760556.png
MikeOmega_0-1677546760556.png1868×729 57.8 KB

.collection.page-width {
    background: #aaa;
}

You can change the color code you want.

Hope my answer will help you

Mike from Omega

3

Thanks for the suggestion. I tried it with no luck. I thought body background-color: #FF0000; would do it too but, nope.

4

Could you leave your store URL then I can check it for you?

5

https://killer-presets-9258.myshopify.com/

This gets me closer but now the product image disappears:

div {
  background-color: #ff0000;
}
1 Like
6

Which option do you want to change color?

MikeOmega_0-1677548466636.png
MikeOmega_0-1677548466636.png1057×938 240 KB

or

MikeOmega_1-1677548478999.png
MikeOmega_1-1677548478999.png1409×913 248 KB

Tell me which option do you prefer

7

Wow! 2 would be awesome!

8

You can add this code into this box

MikeOmega_0-1677548808355.png
MikeOmega_0-1677548808355.png1868×872 82.7 KB

main#MainContent:has(.product) {
    background: #ff0000;
}
9

I tried it but still no change. That’s what is published right now.

Screenshot 2023-02-27 175631.png
Screenshot 2023-02-27 175631.png1317×850 205 KB

10

oh, in that case, you just need add this code to the box

{background: #ff0000;}

4 Likes
11

That’s it!

Thanks for taking the time to help!

12

I am very happy to help you.

If it’s helpful to you, please give it a like to motivate me.

Thanks.

Mike from Omega

1 Like
13

Hi! This code worked for me, but the collections seemed to appear behind the background. The text appear, but the image no. Can you help please?

14

Hi @doisdemonios

Could you leave here your store url?

15

Sure,

www.doisdemonios.com

16

@doisdemonios please tell me more details about your issues

17

Hi I’m also having an issue changing my product page color. I just want my product page to be the same colors as the rest of my website. I tried both of the codes posted but no luck. Any help welcomed.

18

https://d549e8-2.myshopify.com
is my website. I haven’t found a domain yet :sob:

19

Any help?

20

I like option 1, what did you do to get your listing like that? I’ve been trying to do it but no luck