Change color of text and icon for the 'Collapsible Content' section on the Dawn theme

Store Design

Topic summary

A user wants to change the color of both the header text and icon in the ‘Collapsible Content’ section of Shopify’s Dawn theme to blue.

Proposed Solution:

  • Add CSS code to the bottom of the base.css file:
.h4 {
  color: #feae1b !important
}
  • Change the hex color code to the desired blue shade
  • For the icon: Use Shopify’s visual theme editor to select a new icon from the icon list

Current Issues:

  • Multiple users report the CSS method successfully changes the text color but does not affect the icon color
  • One user tried the code but it didn’t work at all, questioning if theme updates broke this method
  • The discussion remains unresolved regarding how to change the icon color through code

The thread shows a gap between the suggested solution and actual results, with the icon color change remaining an open question.

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

Hi @DawnHazel

You can change the color on the .h4 class that the text is using by editing and pasting the following code to the bottom of your base.css file and clicking save.

.h4 {
  color: #feae1b !important
}

*change the #feae1b color to any color you’d like.

You can also change the icon by going to theme’s visual editor inside of Shopify and selecting a new icon from the icon list like so:

Screen Shot 2023-01-09 at 8.55.05 AM.png
Screen Shot 2023-01-09 at 8.55.05 AM.png692×1062 87.4 KB