How can I add social media icons to my store's header?

[fardamintlays]

Hi all,

I’ve looked around, but all the answers seem specific to people’s stores, so I thought I would ask here.

I want to add the Social media icons and links to the header of my store (https://mintlays.com). Ideally they would be below the announcement banners on the right hand-side.

Thanks in advance

[AvadaCommerce]

Hi @fardamintlays ,

You can go to Online Store → Themes → Theme Actions → Edit Code.

In the online code editor, open sections/header.liquid file.

Search the following line in the file:

After this line, add the following code.

{% render ‘icon-facebook’ %}
{% render ‘icon-instagram’ %}

Or this code:

{% render ‘icon-facebook’ %}
{% render ‘icon-pinterest’ %}

{% render ‘icon-twitter’ %}

{% render ‘icon-instagram’ %}

I hope this helps.

[Cedcommerce]

Hello, @fardamintlays ,

To fix this issue you need to paste the below-provided code in your “sections/header.liquid”

Here are the steps to do this:

Go to your Shopify admin > online store

Select theme > Click on Actions > Edit code

Open header.liquid file and paste this code before {% schema %}

image.png

Code:-

{%- if settings.social_twitter_link != blank -%}

• {%- render ‘icon-twitter’ -%}

  {{ ‘general.social.links.twitter’ | t }}

{%- endif -%}

{%- if settings.social_facebook_link != blank -%}

• {%- render ‘icon-facebook’ -%}

  {{ ‘general.social.links.facebook’ | t }}

{%- endif -%}

{%- if settings.social_pinterest_link != blank -%}

• {%- render ‘icon-pinterest’ -%}

  {{ ‘general.social.links.pinterest’ | t }}

{%- endif -%}

{%- if settings.social_instagram_link != blank -%}

• {%- render ‘icon-instagram’ -%}

  {{ ‘general.social.links.instagram’ | t }}

{%- endif -%}

{%- if settings.social_tiktok_link != blank -%}

• {%- render ‘icon-tiktok’ -%}

  {{ ‘general.social.links.tiktok’ | t }}

{%- endif -%}

{%- if settings.social_tumblr_link != blank -%}

• {%- render ‘icon-tumblr’ -%}

  {{ ‘general.social.links.tumblr’ | t }}

{%- endif -%}

{%- if settings.social_snapchat_link != blank -%}

• {%- render ‘icon-snapchat’ -%}

  {{ ‘general.social.links.snapchat’ | t }}

{%- endif -%}

{%- if settings.social_youtube_link != blank -%}

• {%- render ‘icon-youtube’ -%}

  {{ ‘general.social.links.youtube’ | t }}

{%- endif -%}

{%- if settings.social_vimeo_link != blank -%}

• {%- render ‘icon-vimeo’ -%}

  {{ ‘general.social.links.vimeo’ | t }}

{%- endif -%}

Let us know if it works, or if you need further help from us.

All the best,

Team CedCommerce

[fardamintlays]

Hi - Thanks for this, works fine.

How do I make all of the social media links in the header and footer open in a new tab/window?