The Dawn Theme: How to add social media icons to the header?

Topic summary

Adding social media icons to the Shopify Dawn theme header by editing header.liquid. The core approach inserts conditional links (settings.social_*_link) and renders icon snippets (e.g., twitter, facebook, instagram) near the account/cart icons. An alternative solution copies the social list and CSS (component-list-social.css) from footer.liquid into header.liquid; several users confirm this works on desktop.

Key updates and issues:

  • Mobile layout: icons stack in a column and spacing is wide; CSS adjustments were shared to make icons inline and tighten gaps. A screenshot was provided to illustrate the issue.
  • Order/placement: requests to position social icons relative to search/account/cart; can be adjusted by moving the block and tweaking CSS.
  • Theme/version concerns: Dawn 5.0 “missing translation” error reported; needs locale keys added or schema updated. Requests for Sense theme adaptation.
  • Pitfalls: replacing the entire header file can remove the header if structure is broken; one user’s logo size changed after edits; icons still appeared in footer on mobile for some.

Status: Partial fixes shared; several confirmations it works. Thread remains open with requests for version/theme-specific updates and mobile refinements. Action: share header.liquid for tailored edits, include required CSS, verify locale keys, and test on mobile.

Summarized with AI on January 8. AI used: gpt-5.

This worked perfectly!

The only thing is that the social icons still appear at the bottom of the mobile version.

But it worked great for the desktop, and it was easier than the previous reply.