How to add social icons to the Shopify header (no apps)

The social icons are already in the footer. LinkedIn, WhatsApp, Instagram, whatever you filled in. Then you open the header and they're gone. Most Dawn-based themes don't have a header setting for this.

You don't need an app. Dawn already has a snippet called social-icons. The footer calls it. The header does not. Last tested on Dawn in 2026. Same idea on Sense, Craft, Spotlight, Taste, Refresh and the other free OS 2.0 themes.

Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.

Why the footer has icons and the header doesn't

The URLs live in Customize > Theme settings > Social media. Filling those in does not magically print icons everywhere. A file has to render them.

The footer already does that with {% render 'social-icons' %}. In Dawn, the header drawer still uses an old hardcoded list in header-drawer.liquid. That list is Facebook, Instagram, YouTube, TikTok, X, Pinterest, Snapchat, Tumblr, Vimeo. It does not use the shared snippet. So the header never stays in sync with the footer, and platforms Dawn didn't hardcode never show up there.

How to load the social icons in the header

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit. Click the 3 dots next to Edit theme, then click Edit code.

   

3. Left sidebar is a list of folders (layout, sections, snippets). Click snippets to expand it.
4. Click header-drawer.liquid. The file opens in the big pane on the right.
5. Press Ctrl + F (Cmd + F on Mac). In the search box, type list-social. You want the match that sits on a line starting with <ul class="list list-social. That whole list is the old hardcoded icons.

   

6. Left of that <ul> line, between the line number and the code, there is a small arrow. Click it. The whole list collapses into one line. That is the easy way to select it without hunting for the closing </ul>.

   

7. Click the collapsed line so the entire <ul> is selected (the editor highlights the folded block).

   

8. Delete it. Leave the {% if show_social_links %} and {% endif %} around it. You should see a blank line between those two tags. That if is Dawn checking that you actually filled in social URLs. Don't remove it.

   

9. Paste this one line in that blank spot. You are swapping the old list for Dawn's shared snippet. Don't paste it under the old list or you'll get two rows of icons:

   {%- render 'social-icons', class: 'header__list-social' -%}

   If there is no list-social block, use the search in the left sidebar (the one that searches the whole theme) and put the render in that file instead. Dawn forks rename this more often than you'd think.

10. Click Save (top right of the code editor).

    

If you prefer Shopify's own editor docs, they cover Edit code here: Edit your theme code.

Fill in the social URLs

The snippet only prints an icon when that platform has a URL. Code with empty settings still shows nothing.

1. In the left toolbar of Edit code, click the Shopify bag icon, then Customize theme.

   

2. In the theme editor, click the gear icon (Theme settings). Scroll to Social media. That is not the Header section on the left. Header settings will not show these fields.
3. Paste the profile URLs you actually use. Save. If every field is empty, Dawn sets show_social_links to false and the snippet prints nothing.
4. In the mobile preview, click the hamburger (the 3 lines). The icons sit at the bottom of that menu, not next to the logo. You should see the same icons as the footer, for every URL you filled in.

   

If you want to tweak the spacing

The icons should already sit in a row. If they wrap, stack, or sit too tight, paste this at the bottom of assets/base.css and save. Change the gap if you want more or less space:

.header__list-social { display: flex; gap: 8px; }

LinkedIn, WhatsApp and Google Business

Dawn's Social media settings do not include those three. The shared snippet only knows the platforms in that panel. Facebook and Instagram will show after the steps above. LinkedIn, WhatsApp and a Google Business URL will not, until you add settings and icons for them.

I would not fake those with a Facebook field. If you need those three in the header, tell me. That's a small extra edit in social-icons.liquid plus Theme settings.

If no icons show up

Check you saved header-drawer.liquid. Hard refresh the storefront.

Click the hamburger. The icons are inside that drawer, at the bottom. They will not appear next to the search or cart icons.

Check Theme settings (the gear) > Social media actually has URLs. Empty fields print nothing, and the show_social_links wrap stays false.

If you can't find header-drawer.liquid, search the whole theme for list-social. That's the file you want.

This is the Dawn header drawer (the menu behind the hamburger). It is not a row next to the cart on desktop. If you want icons up there too, tell me which theme you're on.

If you get stuck, tell me the theme name. That usually solves it.