How do I add social icons to the header in Debut theme?

Store Design

Topic summary

A user seeks to add social media icons to the header of Shopify’s Debut theme.

Solution Provided:
Prezentech shares a code snippet (CSS/Liquid) that can be added to the header.liquid file to display social icons in the header. The code checks for social media links in theme settings and renders corresponding icons.

Implementation Steps:

  • Paste the provided code into header.liquid
  • Configure social media links in theme customization settings
  • Icons should appear in the header alongside existing elements

Common Issues & Follow-ups:

  • Alignment problems: Multiple users report icons causing logo misalignment or appearing in undesired positions (below menu, not centered, etc.)
  • Customization needs: Users request help positioning icons next to specific elements (search icon, centered with logo)
  • Theme conflicts: One user notes the “Add to Cart” sections disappear after implementation

Resolution:
Prezentech offers personalized assistance through direct messages for positioning and alignment issues. Several users confirm the solution works but requires additional customization for proper placement. The discussion remains active with ongoing troubleshooting requests.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
4

You can add the social media in the header by adding below code:

{%- if
              settings.social_twitter_link != blank
          or settings.social_facebook_link != blank
          or settings.social_pinterest_link != blank
          or settings.social_instagram_link != blank
          or settings.social_tumblr_link != blank
          or settings.social_snapchat_link != blank
          or settings.social_youtube_link != blank
          or settings.social_vimeo_link != blank
          or request.page_type == 'article'
          or request.page_type == 'blog'
          -%}
          {%- assign social_icons = true -%}
          {%- endif -%}
          
          {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
          
          {%- if social_icons -%}
            
              {%- for social in socials -%}
                {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
                {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
                {%- if settings[social_link] != blank -%}
                  - {%- include icon_link -%}
                        {{ social }}
                    
                  
                {%- endif -%}
              {%- endfor -%}
            

          {%- endif -%}