Change product details color on product page - Dawn Theme

Topic summary

A user wants to add a background color to a specific section of their product page in the Dawn theme without coloring the entire page. They shared screenshots showing they want to highlight just the product details/information area to visually separate it from other sections.

Proposed Solution:
A community member provided CSS code to target the product info container:

.product__info-container {
  background: grey;
  padding: 10px;
}

Implementation Steps:

  • Navigate to Online Store > Themes in Shopify Admin
  • Edit the active theme
  • Open main.css (or base.css/style.css) in the Assets folder
  • Add the CSS code at the bottom of the file
  • Customize the background color as desired
  • Save changes

The discussion appears ongoing as the user is refining exactly which section needs the color treatment, sharing additional screenshots to clarify the specific area they want to style.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

Hi

I want to change to color like on the image on my page, i have tried background but the colored the whole page. I just want to have a color like this to split up the sections. Can it be possible? Thanks in advance. :slightly_smiling_face:

www.dekanten.no

See attached image:

1 Like

I understand you’re looking to add color to specific sections of your page without affecting the entire background. Yes, it’s definitely possible to achieve that! You can apply background color to individual sections or divs on your page rather than the entire page background.

I can help guide you through the process. If you could provide a bit more detail on which sections you’d like to color, I’ll be happy to assist further.

Thanks again, and I’m looking forward to helping you achieve the look you want! :blush:

1 Like

Hi @Dekanten

Do you mean like this?

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.product__info-container {
    background: grey;
    padding: 10px
}

And Save.

Note: you can change the background color you want.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

Hi

See attached image from my page, i want only this section in another color. Please. :slightly_smiling_face:

Hello

We are into something here. :slightly_smiling_face:

But i want this part only, see image below. :slightly_smiling_face:

Thanks