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.

Create a New Section Liquid

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.

Edit Post

about:blankCode: Change block type or styleAdd titleHow to Add Social Media Icons on Shopify

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.

---

Create a New Section Liquid

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 jotting.com --->
</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 %}

Add Code in Theme.css

Go to the Assets folder, find the style sheet (“CSS/SCSS”) file your theme uses, we are using the free Shopify Dawn theme, so in this case the CSS/SCSS file is named base.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;
  }
}

Create Social Media Icon Banner in the Customizer

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!