Social icons: How to add social icons to the footer in a column

This customization allows you to move the social icons from the bottom of your footer and into a column. We will cover three location options - The newsletter column, the text content column or replace your link list menus with the social icons. 

Examples

Below newsletter:

In text column:

(The text column heading can be modified in the settings and content can be removed to only show social icons)

Or, replace link-list menu column with social icons:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Create the social icon snippet

Please note - This is NOT the same code as the header version tutorial and is required.

In the Snippets folder, choose Add a new snippet:

Call the snippet:

social-icons-footer

Example:

Choose the Create snippet button to continue. 

In the code area on the right, paste all the code from this file:

OPTION 1

Pipeline 5.0 and higher:
Click to view code

OPTION 2

Earlier versions of Pipeline:
Click to view code

Save the file.

2

Use the snippet in your footer file

Now you can call that snippet in your footer file depending on where you'd like to show the social icons.

Open your footer.liquid file from the sections folder:

Option 1: Below newsletter signup

Example:

In the code area of the Code Editor, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

include

After you locate the line (2) where the newsletter-form is included, make blank line after and then add the following code:

Use this code to call the social-icons snippet - Copy using Command-C (Mac) or Control-C (Win):

{% include 'social-icons-footer' %}

Example of where to add:

Find that right spot and then Paste the code - Paste using Command-V (Mac) or Control-V (Win):

Save and preview your site - That's it. 

Option 2: In text content column

Example:

In the code area of the Code Editor, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

block.settings.text

After you locate the line (2), make blank line after and then add the following code:

Use this code to call the social-icons snippet - Copy using Command-C (Mac) or Control-C (Win):

{% include 'social-icons-footer' %}

Example of where to add:

Be sure it's before the closing </div> line

Find that right spot and then Paste the code - Paste using Command-V (Mac) or Control-V (Win):

Save and preview your site - That's it. 

You can modify the title and even remove any of the default text to only show the social icons in that column. 

Option 3: Replace the menu column with social icons

Example:

If you're not using the link-list menu option, you can replace it completely with the social icons. This requires a bit more work and you won't have the ability to add a menu in the future. I would recommend you use options 1 or 2 before choosing this. 

In the code area of the Code Editor, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

linklist

Locate this section (2):

We will be replacing this entire section with new code:

Carefully select that area starting with the when linklist line and ending with the closing </div> line.

Then replace that section with the following code:

{% when 'linklist' %}
{% assign linklist = linklists[block.settings.linklist] %}
<div class="grid__item {{ footer_column_width }}" {{ block.shopify_attributes }}>
  <h5 class="uppercase">Social </h5>
  <hr class="hr--underline">
  {% include 'social-icons-footer' %} 
</div>

Example:

Save and preview your site - That's it. 

To manage which icons are displayed, use the same social settings used with your footer. 

Also: Remember to uncheck standard social icons in the Footer section:

Uncheck:

Modifying the position of the social icons

The new snippet has a unique class associated to the social icons. You can target the class in your CSS file to add or remove the margin. The class to target is:

.footer-social

Where to add your CSS style code

Removing the header icons

If you need to undo or remove this change, use the Older versions drop-down option and rollback to before you replaced the above code.