Add Your Social Link (Icon)
Last updated
Last updated
If you want to add a link to your social accounts so that a social icon is displayed in the footer, and in the mobile menu of your website, follow this:
Go to Settings > Code injection from the admin menu
Choose Site footer
Below is the code needed to add a specific icon:
Instagram icon
Copy
<script>
const socials = document.querySelectorAll(".socials");
const instagramLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const checkSocialLinkPosition = (social) => {
if (social.closest('.header-subscribe')) return ' social-link--gray-bg'
if (social.closest('.mobile-menu')) return ' social-link--white-bg'
if (social.closest('.footer')) return ' social-link--gray-bg'
}
socials.forEach(social => {
social.insertAdjacentHTML("beforeend",
`<a class="social-link social-link--instagram${checkSocialLinkPosition(social)}" href="${instagramLink}" target="_blank" rel="noopener noreferrer" aria-label="instagram">
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 7.16796C8.34261 7.16796 6.99999 8.51106 6.99999 10.168C6.99999 11.8253 8.34311 13.168 10 13.168C11.6573 13.168 13 11.8249 13 10.168C13 8.51066 11.6569 7.16796 10 7.16796ZM10 5.16796C12.7604 5.16796 15 7.40506 15 10.168C15 12.9285 12.7629 15.168 10 15.168C7.23952 15.168 5 12.9309 5 10.168C5 7.40749 7.23709 5.16796 10 5.16796ZM16.5 4.91711C16.5 5.60722 15.9392 6.16713 15.25 6.16713C14.5599 6.16713 14 5.60636 14 4.91711C14 4.22786 14.5607 3.66797 15.25 3.66797C15.9383 3.6671 16.5 4.22786 16.5 4.91711ZM10 2.16797C7.52551 2.16797 7.12219 2.17452 5.97128 2.22577C5.18717 2.26258 4.66155 2.36804 4.17318 2.55764C3.73918 2.72596 3.42611 2.92695 3.09254 3.26052C2.75769 3.59537 2.55706 3.9076 2.38942 4.34179C2.19938 4.83128 2.09395 5.35607 2.0578 6.13911C2.00605 7.24316 2 7.62901 2 10.168C2 12.6425 2.00655 13.0458 2.05779 14.1966C2.09462 14.9804 2.20022 15.5068 2.38936 15.994C2.55812 16.4286 2.75952 16.7424 3.09148 17.0744C3.42765 17.4101 3.74081 17.6114 4.17089 17.7774C4.66521 17.9685 5.1905 18.0741 5.97113 18.1102C7.07519 18.1619 7.46104 18.168 10 18.168C12.4745 18.168 12.8778 18.1614 14.0286 18.1102C14.8107 18.0735 15.3375 17.9676 15.826 17.7786C16.2594 17.6103 16.5742 17.4082 16.9064 17.0765C17.2426 16.7398 17.4435 16.4274 17.6097 15.9963C17.8003 15.5038 17.9061 14.9778 17.9422 14.1969C17.9939 13.0928 18 12.7069 18 10.168C18 7.69348 17.9934 7.29017 17.9422 6.13933C17.9054 5.35702 17.7995 4.82945 17.6103 4.34115C17.4424 3.90835 17.2407 3.59432 16.9074 3.26052C16.572 2.92512 16.2606 2.7249 15.8261 2.55739C15.337 2.36751 14.8114 2.26193 14.0288 2.22578C12.9248 2.17402 12.5389 2.16797 10 2.16797ZM10 0.167969C12.7166 0.167969 13.0558 0.177969 14.1225 0.227969C15.1866 0.277139 15.9125 0.445469 16.55 0.692968C17.2091 0.947138 17.7658 1.29047 18.3216 1.8463C18.8766 2.40214 19.22 2.96047 19.475 3.61797C19.7216 4.25463 19.89 4.98129 19.94 6.04546C19.9875 7.11213 20 7.45129 20 10.168C20 12.8847 19.99 13.2238 19.94 14.2905C19.8908 15.3547 19.7216 16.0805 19.475 16.718C19.2208 17.3772 18.8766 17.9338 18.3216 18.4897C17.7658 19.0446 17.2066 19.388 16.55 19.643C15.9125 19.8897 15.1866 20.058 14.1225 20.108C13.0558 20.1555 12.7166 20.1679 10 20.1679C7.28332 20.1679 6.94415 20.1579 5.87749 20.108C4.81333 20.0588 4.08833 19.8897 3.45 19.643C2.79166 19.3888 2.23416 19.0446 1.67833 18.4897C1.1225 17.9338 0.779999 17.3747 0.525 16.718C0.2775 16.0805 0.11 15.3547 0.0600001 14.2905C0.0125002 13.2238 0 12.8847 0 10.168C0 7.45129 0.0100002 7.11213 0.0600001 6.04546C0.10916 4.98046 0.2775 4.25546 0.525 3.61797C0.779159 2.95964 1.1225 2.40214 1.67833 1.8463C2.23416 1.29047 2.7925 0.947968 3.45 0.692968C4.0875 0.445469 4.8125 0.277969 5.87749 0.227969C6.94415 0.180469 7.28332 0.167969 10 0.167969Z" fill="black"/>
</svg>
</a>`);
})
</script>Copy this code and paste it inside Site footer input area
Then, change "CHANGE_THIS_TO_YOUR_SOCIAL_LINK" to your social account link, like this:
Click Save to save your work!
