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!
How to Create a Product Image Slider on Dawn Theme
How To Create A Sticky Add To Cart On Shopify
How to Create a Featured Product Slider on Shopfiy
Cart Drawer/Slider For Dawn Theme
How to Create Collection Color Swatches on Dawn Theme
How to Use Automation to Grow Your Shopify Store
SMS Marketing: Why It’s Better Than Email Marketing for Shopify Stores
How To Make Dawn Theme Header Transparent