Add Social Media Icons to Desktop Header in Spotlight Theme

Store Design
, , ,
1

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.

2

Hello @alexajasmin

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

Open this file:

sections/header.liquid
  1. 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:


  {% render 'social-icons' %}

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 */
}
3

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

4

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.

5

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.