Dawn Theme: Change Color Of Certain Elements

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.

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!

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

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


Hope this answer helps.

Best regards,

Henry | PageFly

1 Like

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

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