Can someone please help me with the code to display social media icons in the header of Dawn theme.
Topic summary
Adding social media icons to the Shopify Dawn theme header and how to implement them.
-
Initial request: code solution to display social icons in the header.
-
Suggestions: check Dawn’s theme customizer for built‑in social icons; a YouTube tutorial link was shared.
-
Implementation: a custom Liquid snippet was provided to insert a social icon list into announcement-bar.liquid (Shopify’s theme file for the top announcement bar). It uses settings.social_* links and render ‘icon-*’ snippets for Twitter, Facebook, Pinterest, Instagram, TikTok, Tumblr, Snapchat, YouTube, and Vimeo. Images show the resulting icons.
-
Outcome: a user successfully added the icons, confirming they appear.
-
Follow-up requests:
• Reduce the header’s increased height/width after adding the icons (likely requires CSS adjustments).
• Make each social link open in a new tab (e.g., target=“_blank” and rel=“noopener”). -
Status: no posted fixes yet for sizing or new-tab behavior; discussion remains open.
-
Notes: The code snippet and images are central to understanding the solution; Liquid refers to Shopify’s templating language, and Dawn is Shopify’s default theme.
@anujmep
Might be Dawn theme has this default functionality, in theme customizer
@anujmep May this help you. Click Here.
Hello @anujmep ,
We can fix this issue with the help of a custom code.
You need to update this code in the announcement-bar.liquid file.
Refer to the below-provided image.
-
{%- render ‘icon-twitter’ -%}
{{ ‘general.social.links.twitter’ | t }}
-
{%- render ‘icon-facebook’ -%}
{{ ‘general.social.links.facebook’ | t }}
-
{%- render ‘icon-pinterest’ -%}
{{ ‘general.social.links.pinterest’ | t }}
-
{%- render ‘icon-instagram’ -%}
{{ ‘general.social.links.instagram’ | t }}
-
{%- render ‘icon-tiktok’ -%}
{{ ‘general.social.links.tiktok’ | t }}
-
{%- render ‘icon-tumblr’ -%}
{{ ‘general.social.links.tumblr’ | t }}
-
{%- render ‘icon-snapchat’ -%}
{{ ‘general.social.links.snapchat’ | t }}
-
{%- render ‘icon-youtube’ -%}
{{ ‘general.social.links.youtube’ | t }}
-
{%- render ‘icon-vimeo’ -%}
{{ ‘general.social.links.vimeo’ | t }}
{%- if settings.social_twitter_link != blank -%}
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
{%- endif -%}
Here, in the below image you can see the output in the below image, after adding the code to your announcement-bar.liquid file.
Hope it helps. Reach out to us if you have any further questions.
All the best,
CedCommerce
Hi, @anujmep
I added social icons to the header following your custom code. Thanks. I’ve been looking all over for a solution. Can you assist me with two additional code adjustments? The code made the header wider. How can I reduce the size? Also, how can I get each social link to open in a new tab instead of directing customers away from the website? https://www.melanincrown.com
Hi, @Cedcommerce
I added social icons to the header following your custom code. Thanks. I’ve been looking all over for a solution. Can you assist me with two additional code adjustments? The code made the header wider. How can I reduce the size? Also, how can I get each social link to open in a new tab instead of directing customers away from the website? https://www.melanincrown.com