Dawn Theme: Change Color Of Certain Elements

Store Design
, , , , ,

Topic summary

Main issue: change multiple UI element colors in a Shopify Dawn theme to hex #dcc9b6.

Requested elements:

  • Search bar (icon and input text).
  • Cart icon.
  • Mobile hamburger menu icon and any related text.
  • Social media icons (Twitter, Facebook, Instagram).

Proposed solutions:

  • Add custom code to theme.liquid before the tag (step-by-step screenshots provided). This approach targets global theme elements. Images are provided to guide file placement.
  • Add CSS rules to Assets > base.css to recolor key elements:
    .header__icon { color: #dcc9b6 !important; }
    .list-social__link { color: #dcc9b6 !important; }
    This directly updates header icons and social icons.

Outcome/status:

  • Original poster thanked both contributors; no follow-up questions. The issue appears resolved based on acknowledgment.

Notes:

  • Code snippets and screenshots are central to applying the changes.
  • The CSS provided explicitly covers header/cart icons and social icons; search input text and mobile menu text may require additional selectors if not fully affected by the first method.
Summarized with AI on January 26. AI used: gpt-5.
1

Hello! I need some assistance in changing the color of some elements on my website to this specific color #dcc9b6.

Specifically, I need help with the following:

  1. Search Bar: I would like to change the color of the search icon and the text input field.
  2. Cart Icon: I want to modify the color of the cart icon.
  3. Mobile Hamburger Menu: I would like to adjust the color of the hamburger menu icon and any associated text when viewed on mobile devices.
  4. I would also like to change the color of the social media icons for Twitter, Facebook, and Instagram to be set to the color.

I would really appreciate if you could help me out with this, see screenshots below. Thank you in advance!

Z.png
Z.png2846×466 58.7 KB

ZZ.png
ZZ.png2878×704 94.1 KB

Website: https://conscire.co.uk/
Password: Conscire9898!

2

Hi @oliverconscire ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyHenry_0-1684809473356.png
PageFlyHenry_0-1684809473356.png1600×794 139 KB

PageFlyHenry_1-1684809473360.png
PageFlyHenry_1-1684809473360.png1600×777 197 KB

Hope this answer helps.

Best regards,

Henry | PageFly

1 Like
3

Hello @oliverconscire

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.header__icon {
    color: #dcc9b6 !important;
}
.list-social__link {
    color: #dcc9b6 !important;
}
1 Like
4

@oscprofessional , @PageFly-Henry Many thanks guys! Much appreciated.