DAWN THEME - How To Add Social Icons To Header Infront Of Cart Icon?

Topic summary

Goal: place social media icons in the Dawn theme header before the cart icon.

What was tried: a Liquid snippet adding social links after the cart/account code. Issues reported:

  • Icons appeared behind the cart icon (likely layering/positioning).
  • Visible shifting on load (layout shift), suggesting late CSS/icon rendering.
  • On smaller screens, icons didn’t hide/wrap gracefully, forming a vertical stack.

Status/updates:

  • The original poster notes an accepted solution and later mentions finding another approach, but details aren’t provided in the thread.
  • Another user reports icons still render after the cart and wrap into two lines on mobile. After adjustments, they align on desktop, but on mobile they collapse inside the hamburger menu (mobile menu icon). A screenshot was attached to illustrate.

Next steps suggested:

  • Add targeted CSS for the mobile (hamburger) menu to position/hide icons appropriately.
  • Clarify desired mobile placement (next to the login icon, and whether before/after it).
  • Share store URL for tailored help.

Resolution: open/ongoing; no final code fix for mobile provided yet.

Summarized with AI on February 3. AI used: gpt-5.
![header social.png|789x372](upload://oC5gc2F3MJd0rPcdVNVFyCqPuzs.png)

How do I Add Social Icons To Header Infront Of Cart Icons?

I tried this code, but it put the social icons behind the cart icon. Also this code would load slowly so I would see the icons shifting as the page loads. Also the icons would not dissappear on smaller screens, it would just bend and create an awkard vertical line of social media Icons,

I have the latest dawn theme:

My Store URL is: https://retrochic-socialbychantee.myshopify.com

Password: 1

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 -%}>

This is an accepted solution.

I found another solution

Hi Thank you for sharing, but I am still getting the icons after the cart and on mobile it splits into 2 lines. Is there an additional step to resolve this?
Thanks in advance

Hello, do you still need help with this?

Hi
I did manage to get them lined up on desktop view but in mobile view they are collapsed within the hamburger menu - guessing its space constraints.

If you sent me your store url I might be able to help you fix it, I’m not a coder i’m just learning but i’ve fixed issues similar to this in my own theme / store so I might be able to help. I think you just need to add some extra css to your theme that will target your hamburger menu..

Just to clarify for the mobile menu, you want the social icons to be next to your log in icon? and do you want them before or after the log in icon.