Add Social Media Icons to Desktop Header in Spotlight Theme

[alexajasmin]

Hi, I need to add the social media icons to the header only on desktop. They're already showing in the footer and in the menu on mobile. I'm using the Spotlight theme.

[devcoders · Accepted solution]

Hello @alexajasmin 

1. Find Your Header File
Go to Online Store > Themes > Actions > Edit code

Open this file:

sections/header.liquid

2. Insert the Social Icons Code

Find a good spot inside the header — usually near the header__icons or header__inline-menu container.

Paste this snippet where you want the icons to appear only on desktop:

<div class="header__social-icons medium-up">
  {% render 'social-icons' %}
</div>

If positioning or spacing looks off, you can tweak it in base.css or theme.css (under Assets):

.header__social-icons {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto; /* Optional: push to right */
}

[alexajasmin]

Hi Devcoders, thank you for your reply! I have the icons where I want them on desktop but I do not want them to show on mobile. 

[devcoders]

Hello @alexajasmin 
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[TheScriptFlow]

Hey Alex,

Hope you are doing great. In order to show the social icons on the header you need to follow the steps that shared by @devcoders.

If you facing the issue while implementing this then could you please share the store url so that I can take look.

Thanks