Seamless Social: Adding LinkedIn, WhatsApp & Google Business Icons to Your Shopify Dawn Header

Hey there, fellow store owners! As someone who spends a lot of time digging through the Shopify community forums, I often come across really practical challenges that many of you face. Today, I want to share a fantastic solution that came out of a recent discussion about adding custom social media icons to the header of the popular Dawn theme.

It’s a common scenario: you’ve got your main social channels linked in the footer, but what if you need more prominent, specific icons like LinkedIn for B2B connections, WhatsApp for direct customer service, or Google Business for local visibility, right up in your header? That’s exactly what one store owner, @dreamtechzone_5, was trying to achieve, and the community really pulled through with a solid answer.

The Header Social Icon Challenge in Dawn

The original post from @dreamtechzone_5 was straightforward: "Need Help Adding Social Icons to Header (LinkedIn, WhatsApp, Google Business) Dawn Theme." They had tried adding the icons, but they weren't showing up. This is a classic challenge with Shopify's modern themes like Dawn.

By default, themes often place social media links in the footer, pulling them from your general theme settings. Moving them, or adding specific ones to a high-traffic area like the header, usually requires a little peek under the hood into the theme's Liquid code. As @suyash1 astutely pointed out in the thread, "these icons are being shown up in the footer, they are might not be shown in menu as they are not part of menu social icons." This highlights why a simple setting change often isn't enough.

Here’s what @dreamtechzone_5 was aiming for, visually:

They wanted LinkedIn, WhatsApp, and Google Business icons specifically in the header, not tucked away in the footer.

The Community-Powered Solution

This is where @devcoders stepped in and really showcased the power of the Shopify community. After a quick exchange where @devcoders offered direct assistance and asked for collaborator access (which is often the quickest way to get a precise solution), they implemented the fix directly on a duplicate theme. This is always a smart move – never make direct changes to your live theme!

Once the solution was working, @dreamtechzone_5 was thrilled, calling @devcoders a "genius" and asking for the instructions to be shared so everyone could benefit. And that's exactly what we're doing here!

Step-by-Step: Adding Social Icons to Your Dawn Theme Header

This solution involves modifying a Liquid snippet in your Dawn theme. Always, and I mean always, duplicate your theme before making any code changes. This way, if something goes wrong, you can easily revert to a working version.

Preparation: Backup Your Theme & Configure Social Links

1. Duplicate Your Theme: From your Shopify admin, go to Online Store > Themes. Find your Dawn theme, click Actions > Duplicate. Work on this duplicate copy.
2. Add Your Social Links: Ensure your desired social media links (LinkedIn, WhatsApp, Google Business) are configured in your theme settings. Go to Online Store > Themes > Customize your duplicate theme. Navigate to Theme settings > Social media and add the URLs for LinkedIn, WhatsApp, and Google Business. The Dawn theme has built-in support for many popular social icons, and by adding the URLs here, the social-icons snippet will know what to render.

The Code Modification

Now, let's get to the specific code change @devcoders provided:

1. Access Theme Code: In your Shopify admin, go to Online Store > Themes. On your duplicate theme, click Actions > Edit code.
2. Locate the File: In the file editor, navigate to the snippets folder and find the file named header-drawer.liquid.
3. Comment Out Existing Social List: Look for the following block of code. It usually contains the default social media links within the header drawer (the menu that slides out on mobile or smaller screens).

 ...

You'll want to comment this out. Commenting out means wrapping it in Liquid comment tags {% comment %} and {% endcomment %}. This effectively disables it without deleting the code, making it easy to revert if needed. For example, it might look something like this:

{% comment %}
  

    
  
{% endcomment %}

Note: The exact content within the

tags might vary slightly, but the goal is to comment out the entire unordered list responsible for rendering social icons in that location.
• Add the Social Icons Snippet: Immediately below the commented-out code, add the following line:

  {%- render 'social-icons', class: 'footer__list-social' -%}
  

  This line tells Shopify to render the social-icons.liquid snippet, which is responsible for pulling the social links you configured in your theme settings and displaying them as icons. @devcoders wisely used the class 'footer__list-social', which might help with some default styling, even though we're placing it in the header.

• Save Your Changes: Click Save in the top right corner.

After saving, you should see the social icons appear in your header drawer. @devcoders even shared a preview of their successful implementation:

Refinement: Placement and Styling

Once the icons are showing, you might need to tweak their appearance or exact placement. @dreamtechzone_5 asked, "Can the icons be placed a little to the left and all the icons be placed on one line?" This is a common follow-up and usually requires some CSS adjustments.

While the thread didn't dive deep into the specific CSS, here are some general tips:

• Inspect Element: Use your browser's "Inspect Element" tool (right-click on the icons and select "Inspect") to identify the CSS classes affecting the icons and their container.
• Add Custom CSS: You can add custom CSS in your theme's base.css or theme.css file (found in the assets folder) or directly in the "Custom CSS" section of the theme customizer. You might need to adjust properties like margin, padding, display (e.g., display: flex; for the container to get them on one line), and justify-content or align-items for alignment.
• Test Responsiveness: Always check how your changes look on different screen sizes (desktop, tablet, mobile) to ensure they look good everywhere.

Here's another visual of the icons in place:

And how it looked on a specific screen size:

It's great to see how a simple code adjustment, combined with the powerful social-icons snippet and your theme settings, can unlock so much customization. This thread is a perfect example of how the Shopify community helps store owners achieve their unique business goals. So, if you've been wanting those key social links front and center, give these steps a try on your duplicate Dawn theme!