Adding background color to a text in dawn theme?

Store Design
, , , , ,

Topic summary

A user seeks to add background color highlighting to specific text portions within Dawn theme’s image-with-text section. The issue affects both homepage and product pages.

Initial Solutions Attempted:

  • Adding CSS via theme.liquid file (worked on homepage but failed on product pages)
  • Modifying theme.css/base.css with template-specific selectors (unsuccessful)

Working Solution:
Target specific paragraph elements using nth-child selectors:

.image-with-text__text p:nth-child(2), 
.image-with-text__text p:nth-child(3) {
    background: #CCA65F !important;
    margin: 0 !important;
    padding: 5px !important;
}

This CSS targets the 2nd and 3rd paragraph elements within the image-with-text component, applying the desired background color with proper spacing. The solution successfully highlights only the intended text portions rather than entire blocks.

Status: Resolved with the nth-child approach.

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

Hello

Been trying to add a background color to a text in dawn theme, but hasnt been able to really find any good answers. Is there anyone who might know how to do this? Got an image with text section that i want to add it to, and its just a part of the text i want to highlight with background color. See image below for explanation:

norduxe_0-1732274097110.png
norduxe_0-1732274097110.png727×525 34 KB

My url is: https://la03ue1o3c6qefsa-86795059542.shopifypreview.com

1 Like
2

Hey @norduxe

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732274523255.png
Moeed_0-1732274523255.png1156×568 229 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Thanks, it worked on the mainpage but once you go into the product page of some products it seems to only been added to 1 row?

norduxe_0-1732274961999.png
norduxe_0-1732274961999.png720×377 22.4 KB

4

Hello,

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
div#ImageWithText--template--23930499236182__image_with_text_ddmcJb
.image-with-text__text.rte.body p strong{
	background-color: beige !important;
}

Thanks!

5

That didnt change anything for me unfortunately

6

Hi @norduxe

Add this one.

Where you paste it.

.image-with-text__text p:nth-child(2), .image-with-text__text p:nth-child(3) {
    background: #CCA65F !important;
    margin: 0 !important;
    padding: 5px !important;
}

And Save.

Result:

Made4uoRibe_1-1732293096454.png
Made4uoRibe_1-1732293096454.png1358×560 201 KB

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

7

Welcome! Would you mind hitting ‘like’ as well? Thanks!