"Image with text" color background. Dawn theme

Store Design
, , , ,

Topic summary

A user wants to change the background color of only the first and last “image with text” sections on their product page (Dawn theme), while leaving the middle section unchanged.

Solutions offered:

  • Custom CSS targeting specific sections: Add CSS code to base.css that targets individual section IDs. One responder provided example code showing how to target specific section template IDs and apply background colors (e.g., background-color: #EEEEEE).

  • Container color scheme setting: As an alternative, adjust the “Container color scheme” option within each section’s settings in the theme editor to set different background colors without custom code.

The CSS approach requires identifying the unique section IDs from the theme code, while the color scheme method uses built-in Shopify theme customization options.

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

I have 3 different “image with text” sections on my product page. But, the twist is that I want to change the color background not of all those sections, but only the first and the last section. How can I do that? Link to the product page: https://galaxyglowz.com/products/galaxyhd-projector-1

2

Hi @GalaxyGlowz , you can add custom css to each section and the color will apply only to this section.

3

Hello @GalaxyGlowz :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.section-template--20176887382363__9c770359-2277-4114-9054-2654b07942fd-padding,
.section-template--20176887382363__fb2185c6-b90a-4f6b-a884-f82f8a962f77-padding {
    background-color: #EEEEEE;
}

The result

Screenshot 2023-11-14 at 08.54.54.png
Screenshot 2023-11-14 at 08.54.54.png1137×748 235 KB

Hope that helps!

4

Could you try to setup “Container color scheme” in every section. There you can set background color.
If doesn’t work custom css last solution :grinning_face: