Website Building » Shopify » How Do I Move Social Media Icons to Shopify Header?

How Do I Move Social Media Icons to Shopify Header?

Last updated on January 8, 2023 @ 8:48 am

There are many ways to move social media icons to the Shopify header. The most common method is to use a Shopify plugin or app. However, this can be done quickly by just adding a simple code to your theme settings.

Adding HTML and CSS is a bit more complex but it gives you more control over the icons. To do this, you’ll need to edit your theme’s code.

PRO TIP: If you are using a Shopify theme that does not have social media icons built into the header, then you will need to use a bit of code to add them. This can be done by adding a snippet of HTML or CSS to your theme.liquid file. Before making any changes to your theme file, it is always recommended to make a backup first.

First, go to Online Store > Themes. Next, click on Edit code for the theme you want to edit.1. In your shopify Admin Dashboard Navigate Online Store - Themes and then click Edit Code In the Section folder, open the header.liquid file. Paste the HTML code inside of <div class=”header__icons”>. Please refer to the image below.

<a href=”https://facebook.com” class=”btn–link site-header__icon”>{% render ‘icon-facebook’ %}</a>
<a href=”https://instagram.com” class=”btn–link site-header__icon”>{% render ‘icon-instagram’ %}</a>Paste the html code in Section - Header.liquedNow that we know what this code does, let’s add our own social media icons to it! If you are not comfortable doing this, you can hire a Shopify Expert.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.