Social media icons
Shopify

How to Add Social Media Icons on Shopify

Looking to create a social media icon banner for your Shopify store? Look no further and follow this guide!

Click here to view our example store

Social media icon banner, great way to direct your customers onto your social pages, get them immersed into your brand. The below tutorial includes 9 social icons and is going to be implemented on your home page, no app needed! Let’s get into it.


Head over to the Sections folder and click Add a new section, and name the section social-icons and click add. You will now have a bare bone section liquid file with minimal code. Delete all the default code and add the below code to that liquid file.

<div class="social-banner">
  <div class="social-text">
    <h3>{{ section.settings.text }}</h3>
  </div>
  <div class="social-icons">
    {% for block in section.blocks %}
    <a href="{{ block.settings.link }}" target="_blank">
    {% if block.settings.icon == 'facebook' %}
    <svg viewBox="0 0 512 512">
      <path d="M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h192V336h-64v-80h64v-64c0-53.024,42.976-96,96-96h64v80    h-32c-17.664,0-32-1.664-32,16v64h80l-32,80h-48v176h96c35.296,0,64-28.704,64-64V64C512,28.704,483.296,0,448,0z" />
    </svg>
    {% elsif block.settings.icon == 'instagram' %}
    <svg viewBox="0 0 512 512">
      <path d="M352,0H160C71.648,0,0,71.648,0,160v192c0,88.352,71.648,160,160,160h192c88.352,0,160-71.648,160-160V160    C512,71.648,440.352,0,352,0z M464,352c0,61.76-50.24,112-112,112H160c-61.76,0-112-50.24-112-112V160C48,98.24,98.24,48,160,48    h192c61.76,0,112,50.24,112,112V352z" />
      <path d="M256,128c-70.688,0-128,57.312-128,128s57.312,128,128,128s128-57.312,128-128S326.688,128,256,128z M256,336    c-44.096,0-80-35.904-80-80c0-44.128,35.904-80,80-80s80,35.872,80,80C336,300.096,300.096,336,256,336z" />
      <circle cx="393.6" cy="118.4" r="17.056" />
    </svg>
    {% elsif block.settings.icon == 'pinterest' %}
    <svg viewBox="0 0 511.977 511.977" style="enable-background:new 0 0 511.977 511.977;">
      <path d="M262.948,0C122.628,0,48.004,89.92,48.004,187.968c0,45.472,25.408,102.176,66.08,120.16    c6.176,2.784,9.536,1.6,10.912-4.128c1.216-4.352,6.56-25.312,9.152-35.2c0.8-3.168,0.384-5.92-2.176-8.896    c-13.504-15.616-24.224-44.064-24.224-70.752c0-68.384,54.368-134.784,146.88-134.784c80,0,135.968,51.968,135.968,126.304    c0,84-44.448,142.112-102.208,142.112c-31.968,0-55.776-25.088-48.224-56.128c9.12-36.96,27.008-76.704,27.008-103.36    c0-23.904-13.504-43.68-41.088-43.68c-32.544,0-58.944,32.224-58.944,75.488c0,27.488,9.728,46.048,9.728,46.048    S144.676,371.2,138.692,395.488c-10.112,41.12,1.376,107.712,2.368,113.44c0.608,3.168,4.16,4.16,6.144,1.568    c3.168-4.16,42.08-59.68,52.992-99.808c3.968-14.624,20.256-73.92,20.256-73.92c10.72,19.36,41.664,35.584,74.624,35.584    c98.048,0,168.896-86.176,168.896-193.12C463.62,76.704,375.876,0,262.948,0z" />
    </svg>
    {% elsif block.settings.icon == 'reddit' %}
    <svg viewBox="0 0 514.24 514.24">
      <polygon points="176,289.089 176,289.121 192,289.121 " />
      <polygon points="336,289.089 336,289.121 352,289.121 " />
      <path d="M514.24,241.121c0-35.296-28.704-64-64-64c-14.112,0-27.52,4.608-38.464,12.96c-35.712-24.8-82.496-39.584-132.256-43.328    l26.848-62.976l78.112,18.24c2.496,24.16,22.72,43.104,47.52,43.104c26.464,0,48-21.536,48-48s-21.536-48-48-48    c-16.768,0-31.52,8.672-40.096,21.76l-91.296-21.344c-7.744-1.76-15.328,2.176-18.4,9.312l-37.12,87.04    c-53.728,1.856-104.928,16.992-143.584,43.36C90.976,181.441,77.92,177.121,64,177.121c-35.296,0-64,28.704-64,64    c0,23.392,12.768,44.544,32.352,55.392c-0.256,2.816-0.352,5.696-0.352,8.608c0,88.224,100.48,160,224,160    c123.488,0,224-71.776,224-160c0-2.496-0.096-4.96-0.256-7.424C500.608,287.073,514.24,265.409,514.24,241.121z M432,81.121    c8.8,0,16,7.168,16,16c0,8.832-7.2,16-16,16s-16-7.168-16-16C416,88.289,423.2,81.121,432,81.121z M144,289.121    c0-17.632,14.368-32,32-32s32,14.368,32,32c0,17.664-14.368,32-32,32S144,306.785,144,289.121z M329.888,395.265    c-22.08,15.968-48,23.968-73.888,23.968s-51.808-8-73.888-23.968c-7.168-5.184-8.768-15.2-3.584-22.336s15.2-8.736,22.336-3.584    c32.992,23.84,77.28,23.904,110.272,0c7.136-5.152,17.12-3.616,22.336,3.584C338.656,380.097,337.024,390.081,329.888,395.265z     M336,321.121c-17.664,0-32-14.336-32-32c0-17.632,14.336-32,32-32s32,14.368,32,32C368,306.785,353.664,321.121,336,321.121z" />
    </svg>
    {% elsif block.settings.icon == 'snapchat' %}
    <svg viewBox="0 0 511.976 511.976">
      <path d="M501.94,374.42c-68.448-11.264-99.296-81.376-100.544-84.352c-0.096-0.192-0.16-0.384-0.288-0.576    c-3.488-7.104-4.32-12.96-2.4-17.408c3.744-8.768,18.08-13.312,27.552-16.32c2.752-0.864,5.344-1.696,7.488-2.528    c9.344-3.68,16-7.68,20.416-12.192c5.248-5.408,6.272-10.592,6.208-13.952c-0.16-8.192-6.432-15.488-16.448-19.04    c-3.36-1.376-7.232-2.112-11.136-2.112c-2.656,0-6.624,0.352-10.368,2.112c-8,3.744-15.168,5.792-21.344,6.08    c-3.264-0.16-5.568-0.864-7.072-1.536c0.192-3.2,0.384-6.496,0.608-9.888l0.096-1.472c2.208-34.656,4.928-77.76-6.528-103.36    c-7.84-17.536-18.368-32.608-31.328-44.832c-10.848-10.24-23.456-18.56-37.472-24.704c-24.352-10.752-47.072-12.352-58.464-12.352    h-0.032c-0.448,0-0.864,0-1.248,0c-3.168,0.032-8.32,0.096-8.8,0.096c-11.36,0-34.112,1.6-58.528,12.352    c-13.984,6.144-26.528,14.432-37.344,24.672c-12.896,12.224-23.392,27.264-31.2,44.736c-11.456,25.568-8.736,68.672-6.56,103.296    v0.064c0.224,3.712,0.48,7.584,0.704,11.36c-1.664,0.736-4.384,1.568-8.384,1.568c-6.464,0-14.144-2.048-22.816-6.112    c-2.56-1.184-5.472-1.792-8.672-1.792c-5.152,0-10.624,1.504-15.328,4.288c-5.952,3.488-9.792,8.384-10.848,13.856    c-0.672,3.584-0.64,10.72,7.296,17.952c4.384,3.968,10.784,7.648,19.072,10.912c2.176,0.864,4.768,1.664,7.488,2.528    c9.472,3.008,23.84,7.552,27.584,16.32c1.888,4.448,1.056,10.304-2.432,17.408c-0.096,0.192-0.192,0.384-0.256,0.576    c-0.896,2.048-9.056,20.448-25.792,39.872c-9.504,11.04-19.968,20.288-31.104,27.456c-13.6,8.768-28.288,14.464-43.68,16.992    c-6.048,0.992-10.368,6.368-10.016,12.48c0.096,1.76,0.512,3.52,1.248,5.216v0.032c2.464,5.728,8.128,10.56,17.344,14.816    c11.264,5.216,28.096,9.6,50.08,13.024c1.12,2.112,2.272,7.392,3.072,11.008c0.832,3.84,1.696,7.808,2.944,12    c1.344,4.544,4.8,9.984,13.728,9.984c3.392,0,7.264-0.768,11.776-1.632c6.592-1.28,15.616-3.04,26.848-3.04    c6.24,0,12.704,0.544,19.2,1.632c12.544,2.08,23.36,9.696,35.872,18.528c18.304,12.928,39.04,27.552,70.72,27.552    c0.864,0,1.728-0.032,2.592-0.096c1.024,0.064,2.336,0.096,3.68,0.096c31.68,0,52.416-14.624,70.72-27.52l0.032-0.032    c12.512-8.8,23.328-16.416,35.872-18.496c6.496-1.088,12.96-1.632,19.2-1.632c10.752,0,19.264,1.376,26.848,2.848    c4.96,0.96,8.8,1.44,11.776,1.44h0.288h0.288c6.528,0,11.328-3.584,13.152-9.824c1.216-4.128,2.08-7.968,2.944-11.904    c0.736-3.392,1.952-8.832,3.04-10.944c21.984-3.456,38.816-7.808,50.08-13.024c9.184-4.256,14.848-9.088,17.312-14.784    c0.736-1.696,1.184-3.456,1.28-5.28C512.308,380.788,507.988,375.38,501.94,374.42z" />
    </svg>
    {% elsif block.settings.icon == 'twitch' %}
    <svg viewBox="0 0 512 512">
      <path d="M48,0L16,96v352h128v64h64l64-64h96l128-136.32V0H48z M464,288l-89.6,96H260.928L192,434.144V384H80V32h384V288z" />
      <rect x="240" y="128" width="32" height="128" />
      <rect x="336" y="128" width="32" height="128" />
    </svg>
    {% elsif block.settings.icon == 'twitter' %}
    <svg viewBox="0 0 512 512">
      <path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016    c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992    c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056    c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152    c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792    c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44    C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568    C480.224,136.96,497.728,118.496,512,97.248z" />
    </svg>
    {% elsif block.settings.icon == 'vk' %}
    <svg viewBox="0 0 511.962 511.962">
      <path d="M507.399,370.471c-1.376-2.304-9.888-20.8-50.848-58.816c-42.88-39.808-37.12-33.344,14.528-102.176    c31.456-41.92,44.032-67.52,40.096-78.464c-3.744-10.432-26.88-7.68-26.88-7.68l-76.928,0.448c0,0-5.696-0.768-9.952,1.76    c-4.128,2.496-6.784,8.256-6.784,8.256s-12.192,32.448-28.448,60.032c-34.272,58.208-48,61.28-53.6,57.664    c-13.024-8.416-9.76-33.856-9.76-51.904c0-56.416,8.544-79.936-16.672-86.016c-8.384-2.016-14.528-3.36-35.936-3.584    c-27.456-0.288-50.72,0.096-63.872,6.528c-8.768,4.288-15.52,13.856-11.392,14.4c5.088,0.672,16.608,3.104,22.72,11.424    c7.904,10.72,7.616,34.848,7.616,34.848s4.544,66.4-10.592,74.656c-10.4,5.664-24.64-5.888-55.2-58.72    c-15.648-27.04-27.488-56.96-27.488-56.96s-2.272-5.568-6.336-8.544c-4.928-3.616-11.84-4.768-11.84-4.768l-73.152,0.448    c0,0-10.976,0.32-15.008,5.088c-3.584,4.256-0.288,13.024-0.288,13.024s57.28,133.984,122.112,201.536    c59.488,61.92,127.008,57.856,127.008,57.856h30.592c0,0,9.248-1.024,13.952-6.112c4.352-4.672,4.192-13.44,4.192-13.44    s-0.608-41.056,18.464-47.104c18.784-5.952,42.912,39.68,68.48,57.248c19.328,13.28,34.016,10.368,34.016,10.368l68.384-0.96    C488.583,400.807,524.359,398.599,507.399,370.471z" />
    </svg>
    {% elsif block.settings.icon == 'youtube' %}
    <svg viewBox="0 0 512 512">
      <path d="M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80    c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904    C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728    c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816    c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096    C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z" />
    </svg>
    {% endif %}
    </a>
  {% endfor %}
  </div>
<!--- Coded by bluish.io --->
</div>


{% style %}

.social-banner {
  background: {{ section.settings.background_color }};
}

.social-text h3 {
  color: {{ section.settings.icon_color }};
}

.social-banner svg {
  fill: {{ section.settings.icon_color }};
}
{% endstyle %}

{% schema %}
{
  "name": "Social icons",
  "settings": [
  {
    "type": "text",
    "id": "text",
    "label": "Socials text"
  },
  {
    "type": "color",
    "id": "background_color",
    "label": "Background color"
  },
  {
    "type": "color",
    "id": "icon_color",
    "label": "Icon & text color"
  }
  ],
  "blocks": [
  {
	"type": "icon",
	"name": "Social icon",
	"settings": [
	  {
	    "type": "select",
		"id": "icon",
		"label": "Choose an icon",
        "options": [
          {
            "value": "facebook",
            "label": "Facebook"
          },
          {
            "value": "instagram",
            "label": "Instagram"
          },
          {
            "value": "pinterest",
            "label": "Pinterest"
          },
          {
            "value": "reddit",
            "label": "Reddit"
          },
          {
            "value": "snapchat",
            "label": "Snapchat"
          },
          {
            "value": "twitch",
            "label": "Twitch"
          },
          {
            "value": "twitter",
            "label": "Twitter"
          },
          {
            "value": "vk",
            "label": "VK"
          },
          {
            "value": "youtube",
            "label": "Youtube"
          }
        ],
        "default": "facebook"
	  },
      {
        "type": "url",
        "id": "link",
        "label": "Social link"
      }
      ]
  }
  ] ,
  "presets": [
  {
    "name": "Social icons",
    "category":"Custom"
  }
  ]
}
{% endschema %}

Go to the Assets folder, find the style sheet (“CSS/SCSS”) file your theme uses, we are using the free Shopify Debut theme, so in this case the CSS/SCSS file is named theme.css. Scroll to the very bottom and paste the below code.

.social-banner {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 32px 24px;
  align-items: center;
  text-align: center;
}

.social-banner svg {
  width: 24px;
  margin: 5px;
}

@media only screen and (max-width: 600px) {
  .social-banner {
    padding: 18px;
    margin-top: 0;
  }

  .social-banner svg {
    width: 18px;
  }
}

You’re done! Go to your theme customizer. Find the Social Icons section and add it to your home page.

The theme customizer comes with a few options, the ability to change the background, icon and text color.

Then click the Add Social Icon, you will have the ability to select which icon you would like, out of the 9 social icons.

You’re done! Enjoy your social media icon banner to get your customers on your social media profiles!

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Debut theme, downloaded on 3rd of August, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

Leave a Reply

Your email address will not be published. Required fields are marked *