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

Technical Q&A

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.
5

Hi @KarlisR ,

You can add social media icon on header by replacing code on header.liquid file.
replace This

{%- if shop.customer_accounts_enabled -%}> > {% render ‘icon-account’ %}> > {%- liquid> if customer> echo ‘customer.account_fallback’ | t> else> echo ‘customer.log_in’ | t> endif> -%}> > > {%- endif -%}> > > {%- liquid> if cart == empty> render ‘icon-cart-empty’> else> render ‘icon-cart’> endif> -%}> {{ ‘templates.cart.cart’ | t }}> {%- if cart != empty -%}>
{%- if cart.item_count < 100 -%}> {{ cart.item_count }}> {%- endif -%}> {{ ‘sections.header.cart_count’ | t: count: cart.item_count }}>
{%- endif -%}> >

with this

{%- if shop.customer_accounts_enabled -%}> > {% render ‘icon-account’ %}> > {%- liquid> if customer> echo ‘customer.account_fallback’ | t> else> echo ‘customer.log_in’ | t> endif> -%}> > > {%- endif -%}> > > {%- liquid> if cart == empty> render ‘icon-cart-empty’> else> render ‘icon-cart’> endif> -%}> {{ ‘templates.cart.cart’ | t }}> {%- if cart != empty -%}>
{%- if cart.item_count < 100 -%}> {{ cart.item_count }}> {%- endif -%}> {{ ‘sections.header.cart_count’ | t: count: cart.item_count }}>
{%- endif -%}> >
{%- if settings.social_twitter_link != blank -%}> - > > {%- render ‘icon-twitter’ -%}> {{ ‘general.social.links.twitter’ | t }}> >
{%- endif -%}> {%- if settings.social_facebook_link != blank -%}> - > > {%- render ‘icon-facebook’ -%}> {{ ‘general.social.links.facebook’ | t }}> >
{%- endif -%}> {%- if settings.social_pinterest_link != blank -%}> - > > {%- render ‘icon-pinterest’ -%}> {{ ‘general.social.links.pinterest’ | t }}> >
{%- endif -%}> {%- if settings.social_instagram_link != blank -%}> - > > {%- render ‘icon-instagram’ -%}> {{ ‘general.social.links.instagram’ | t }}> >
{%- endif -%}> {%- if settings.social_tiktok_link != blank -%}> - > > {%- render ‘icon-tiktok’ -%}> {{ ‘general.social.links.tiktok’ | t }}> >
{%- endif -%}> {%- if settings.social_tumblr_link != blank -%}> - > > {%- render ‘icon-tumblr’ -%}> {{ ‘general.social.links.tumblr’ | t }}> >
{%- endif -%}> {%- if settings.social_snapchat_link != blank -%}> - > > {%- render ‘icon-snapchat’ -%}> {{ ‘general.social.links.snapchat’ | t }}> >
{%- endif -%}> {%- if settings.social_youtube_link != blank -%}> - > > {%- render ‘icon-youtube’ -%}> {{ ‘general.social.links.youtube’ | t }}> >
{%- endif -%}> {%- if settings.social_vimeo_link != blank -%}> - > > {%- render ‘icon-vimeo’ -%}> {{ ‘general.social.links.vimeo’ | t }}> > > {%- endif -%}>

Replace this

{%- if shop.customer_accounts_enabled -%}> > {% render ‘icon-account’ %}> {%- liquid> if customer> echo ‘customer.account_fallback’ | t> else> echo ‘customer.log_in’ | t> endif> -%}> > {%- endif -%}> >

with this

**> {%- if shop.customer_accounts_enabled -%}> **> {% render ‘icon-account’ %}> {%- liquid> if customer> echo ‘customer.account_fallback’ | t> else> echo ‘customer.log_in’ | t> endif> -%}> **> {%- endif -%}> *
*> {%- if settings.social_twitter_link != blank -%}> *- *> **> {%- render ‘icon-twitter’ -%}> {{ ‘general.social.links.twitter’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_facebook_link != blank -%}> *- *> **> {%- render ‘icon-facebook’ -%}> {{ ‘general.social.links.facebook’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_pinterest_link != blank -%}> *- *> **> {%- render ‘icon-pinterest’ -%}> {{ ‘general.social.links.pinterest’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_instagram_link != blank -%}> *- *> **> {%- render ‘icon-instagram’ -%}> {{ ‘general.social.links.instagram’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_tiktok_link != blank -%}> *- *> **> {%- render ‘icon-tiktok’ -%}> {{ ‘general.social.links.tiktok’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_tumblr_link != blank -%}> *- *> **> {%- render ‘icon-tumblr’ -%}> {{ ‘general.social.links.tumblr’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_snapchat_link != blank -%}> *- *> **> {%- render ‘icon-snapchat’ -%}> {{ ‘general.social.links.snapchat’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_youtube_link != blank -%}> *- *> **> {%- render ‘icon-youtube’ -%}> {{ ‘general.social.links.youtube’ | t }}> **> *
*> {%- endif -%}> {%- if settings.social_vimeo_link != blank -%}> *- *> **> {%- render ‘icon-vimeo’ -%}> {{ ‘general.social.links.vimeo’ | t }}> **> **> {%- endif -%}> *
*> > *

then replace this code

with this