Hello everyone,
I have added social icons (LinkedIn, WhatsApp, and Google Business Profile) to the footer section of my website. Now, I would like to add these same social icons to the header section as well.
Could anyone please guide me on how to add LinkedIn, WhatsApp, and Google Business Profile icons to the header section? Any help would be greatly appreciated. Thank you!
Store: https://coconutbowlsshop.myshopify.com/
Password: Admin
Footer Section
Header Section
@dreamtechzone_5 - you can copy the social media code from footer and put it in the header to add icons to header. This will need bit custom coding if default options in header are not available
Can you give me the code?
@dreamtechzone_5 this is the html code in your footer, you can i t, but just be careful if you are not into coding, else it would be easy for you
<ul class="list-unstyled list-social footer__list-social" role="list"><li class="list-social__item">
<a href="https://www.facebook.com/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg class="icon icon-facebook" viewBox="0 0 20 20"><path fill="currentColor" d="M18 10.049C18 5.603 14.419 2 10 2s-8 3.603-8 8.049C2 14.067 4.925 17.396 8.75 18v-5.624H6.719v-2.328h2.03V8.275c0-2.017 1.195-3.132 3.023-3.132.874 0 1.79.158 1.79.158v1.98h-1.009c-.994 0-1.303.621-1.303 1.258v1.51h2.219l-.355 2.326H11.25V18c3.825-.604 6.75-3.933 6.75-7.951"></path></svg>
</span>
<span class="visually-hidden">Facebook</span>
</a>
</li><li class="list-social__item">
<a href="https://www.instagram.com/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg class="icon icon-instagram" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M13.23 3.492c-.84-.037-1.096-.046-3.23-.046-2.144 0-2.39.01-3.238.055-.776.027-1.195.164-1.487.273a2.4 2.4 0 0 0-.912.593 2.5 2.5 0 0 0-.602.922c-.11.282-.238.702-.274 1.486-.046.84-.046 1.095-.046 3.23s.01 2.39.046 3.229c.004.51.097 1.016.274 1.495.145.365.319.639.602.913.282.282.538.456.92.602.474.176.974.268 1.479.273.848.046 1.103.046 3.238.046s2.39-.01 3.23-.046c.784-.036 1.203-.164 1.486-.273.374-.146.648-.329.921-.602.283-.283.447-.548.602-.922.177-.476.27-.979.274-1.486.037-.84.046-1.095.046-3.23s-.01-2.39-.055-3.229c-.027-.784-.164-1.204-.274-1.495a2.4 2.4 0 0 0-.593-.913 2.6 2.6 0 0 0-.92-.602c-.284-.11-.703-.237-1.488-.273ZM6.697 2.05c.857-.036 1.131-.045 3.302-.045a63 63 0 0 1 3.302.045c.664.014 1.321.14 1.943.374a4 4 0 0 1 1.414.922c.41.397.728.88.93 1.414.23.622.354 1.279.365 1.942C18 7.56 18 7.824 18 10.005c0 2.17-.01 2.444-.046 3.292-.036.858-.173 1.442-.374 1.943-.2.53-.474.976-.92 1.423a3.9 3.9 0 0 1-1.415.922c-.51.191-1.095.337-1.943.374-.857.036-1.122.045-3.302.045-2.171 0-2.445-.009-3.302-.055-.849-.027-1.432-.164-1.943-.364a4.15 4.15 0 0 1-1.414-.922 4.1 4.1 0 0 1-.93-1.423c-.183-.51-.329-1.085-.365-1.943C2.009 12.45 2 12.167 2 10.004c0-2.161 0-2.435.055-3.302.027-.848.164-1.432.365-1.942a4.4 4.4 0 0 1 .92-1.414 4.2 4.2 0 0 1 1.415-.93c.51-.183 1.094-.33 1.943-.366Zm.427 4.806a4.105 4.105 0 1 1 5.805 5.805 4.105 4.105 0 0 1-5.805-5.805m1.882 5.371a2.668 2.668 0 1 0 2.042-4.93 2.668 2.668 0 0 0-2.042 4.93m5.922-5.942a.958.958 0 1 1-1.355-1.355.958.958 0 0 1 1.355 1.355" clip-rule="evenodd"></path></svg>
</span>
<span class="visually-hidden">Instagram</span>
</a>
</li><li class="list-social__item">
<a href="https://www.tiktok.com/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg class="icon icon-tiktok" viewBox="0 0 20 20"><path fill="currentColor" d="M10.511 1.705h2.74s-.157 3.51 3.795 3.768v2.711s-2.114.129-3.796-1.158l.028 5.606A5.073 5.073 0 1 1 8.213 7.56h.708v2.785a2.298 2.298 0 1 0 1.618 2.205z"></path></svg>
</span>
<span class="visually-hidden">TikTok</span>
</a>
</li><li class="list-social__item">
<a href="https://ca.pinterest.com/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg class="icon icon-pinterest" viewBox="0 0 20 20"><path fill="currentColor" d="M10 2.01a8.1 8.1 0 0 1 5.666 2.353 8.09 8.09 0 0 1 1.277 9.68A7.95 7.95 0 0 1 10 18.04a8.2 8.2 0 0 1-2.276-.307c.403-.653.672-1.24.816-1.729l.567-2.2c.134.27.393.5.768.702.384.192.768.297 1.19.297q1.254 0 2.248-.72a4.7 4.7 0 0 0 1.537-1.969c.37-.89.554-1.848.537-2.813 0-1.249-.48-2.315-1.43-3.227a5.06 5.06 0 0 0-3.65-1.374c-.893 0-1.729.154-2.478.461a5.02 5.02 0 0 0-3.236 4.552c0 .72.134 1.355.413 1.902.269.538.672.922 1.22 1.152.096.039.182.039.25 0 .066-.028.114-.096.143-.192l.173-.653c.048-.144.02-.288-.105-.432a2.26 2.26 0 0 1-.548-1.565 3.803 3.803 0 0 1 3.976-3.861c1.047 0 1.863.288 2.44.855.585.576.883 1.315.883 2.228a6.8 6.8 0 0 1-.317 2.122 3.8 3.8 0 0 1-.893 1.556c-.384.384-.836.576-1.345.576-.413 0-.749-.144-1.018-.451-.259-.307-.345-.672-.25-1.085q.22-.77.452-1.537l.173-.701c.057-.25.086-.451.086-.624 0-.346-.096-.634-.269-.855-.192-.22-.451-.336-.797-.336-.432 0-.797.192-1.085.595-.288.394-.442.893-.442 1.499.005.374.063.746.173 1.104l.058.144c-.576 2.478-.913 3.938-1.037 4.36-.116.528-.154 1.153-.125 1.863A8.07 8.07 0 0 1 2 10.03c0-2.208.778-4.11 2.343-5.666A7.72 7.72 0 0 1 10 2.001z"></path></svg>
</span>
<span class="visually-hidden">Pinterest</span>
</a>
</li><li class="list-social__item">
<a href="https://www.snapchat.com/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg class="icon icon-snapchat" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M17.388 15.396a5 5 0 0 1-1.111.445c-.074.23-.236.564-.596.813a1.9 1.9 0 0 1-.9.308c-.14.015-.313.021-.443.026l-.092.004c-.317.014-.624.042-.958.154l-.002.001a1.7 1.7 0 0 0-.331.168l-.138.085c-.14.087-.33.205-.497.298a4.6 4.6 0 0 1-2.321.602 4.55 4.55 0 0 1-2.315-.602c-.164-.091-.355-.21-.495-.297l-.14-.086a2 2 0 0 0-.338-.172 3.4 3.4 0 0 0-.96-.154l-.09-.003c-.13-.006-.304-.013-.445-.027-.15-.016-.541-.06-.9-.31a1.56 1.56 0 0 1-.593-.809 4.8 4.8 0 0 1-1.112-.446 1.9 1.9 0 0 1-.628-.535 1.44 1.44 0 0 1-.21-1.306 1.5 1.5 0 0 1 .53-.724c.137-.104.27-.17.323-.196 1.23-.604 1.77-1.38 1.996-1.833l-.18-.118c-.167-.11-.342-.223-.438-.291-.252-.178-.572-.449-.779-.85a1.8 1.8 0 0 1-.087-1.473l.002-.005c.344-.922 1.2-1.14 1.704-1.14h.07q.005-.335.033-.678A4.6 4.6 0 0 1 6.132 3.35l.007-.007a5.1 5.1 0 0 1 1.773-1.247 5.1 5.1 0 0 1 2.108-.394c2.272.008 3.522 1.273 3.855 1.655a4.6 4.6 0 0 1 1.176 2.884c.019.227.028.456.032.678h.088c.521.005 1.346.242 1.684 1.133l.005.012a1.8 1.8 0 0 1-.09 1.477c-.209.401-.531.672-.786.85a19 19 0 0 1-.402.267l-.209.138c.224.45.76 1.226 1.994 1.827l.01.004.008.004c.056.029.188.097.325.203.12.093.388.323.52.724.16.493.028.963-.207 1.292a1.9 1.9 0 0 1-.627.541zm-3.315-5.268c.088-.083.33-.248.574-.41l.255-.169.084-.055.217-.144.018-.013.018-.012c.36-.25.514-.504.401-.811-.081-.214-.28-.295-.486-.295a.8.8 0 0 0-.194.02 3 3 0 0 0-.403.12l-.179.068-.013.005-.058.023q-.139.055-.248.093-.05.017-.091.027c-.029.012-.057.012-.082.012-.117 0-.161-.053-.153-.196l.003-.048.017-.264a20 20 0 0 0 .03-.785v-.03a10 10 0 0 0-.03-.943 3.3 3.3 0 0 0-.85-2.102c-.199-.23-1.13-1.217-2.904-1.217a3.8 3.8 0 0 0-1.583.292c-.5.21-.951.527-1.32.93a3.3 3.3 0 0 0-.851 2.101 10 10 0 0 0-.026 1.198l.01.246a22 22 0 0 0 .033.576q0 .028.003.054c.008.135-.032.192-.154.192l-.08-.008-.087-.025a5 5 0 0 1-.254-.096l-.054-.022-.072-.029-.123-.046-.008-.003a3 3 0 0 0-.447-.128 1 1 0 0 0-.142-.011c-.207 0-.405.077-.486.295-.114.307.04.561.397.811l.089.061.274.181.238.156c.243.161.482.323.569.405.175.165.16.293.14.452l-.002.02c-.014.115-.304 1.492-1.926 2.641a6 6 0 0 1-.51.327 7 7 0 0 1-.428.228c-.141.07-.388.217.045.459q.126.069.24.121h.001c.247.113.46.174.65.225l.035.01q.089.022.17.046c.14.042.267.088.382.163.16.104.182.274.203.432.018.133.035.258.133.326.117.082.333.091.623.103.375.015.873.036 1.443.225.287.097.536.253.8.416.514.322 1.08.674 2.075.674 1 0 1.572-.356 2.087-.677.261-.162.508-.315.788-.409.572-.192 1.073-.212 1.448-.226.289-.011.503-.02.617-.102.101-.068.118-.193.135-.328.021-.157.044-.328.206-.434.116-.075.244-.121.388-.163l.2-.056a4 4 0 0 0 .642-.222 4 4 0 0 0 .248-.124c.429-.242.186-.394.04-.468a7 7 0 0 1-.423-.223l-.01-.005a7 7 0 0 1-.5-.319c-1.629-1.145-1.916-2.526-1.93-2.649v-.002c-.024-.163-.044-.293.138-.465m-10.3 4.838h.002Zm.106-1.842h-.002Zm-.249 2.255" clip-rule="evenodd"></path></svg>
</span>
<span class="visually-hidden">Snapchat</span>
</a>
</li><li class="list-social__item">
<a href="https://www.linkedin.com/in/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-1.337-.026-3.058-1.867-3.058-1.867 0-2.152 1.459-2.152 2.969v5.693h-3v-11h2.879v1.504h.041c.401-.757 1.381-1.557 2.841-1.557 3.038 0 3.6 2.001 3.6 4.604v6.449z"></path>
</svg></span>
<span class="visually-hidden">LinkedIn</span>
</a>
</li><li class="list-social__item">
<a href="https://wa.me/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
<path d="M 0.576 44.596 C 0.573 52.456 2.626 60.129 6.53 66.892 L 0.201 90 l 23.65 -6.201 c 6.516 3.553 13.852 5.426 21.318 5.429 h 0.019 c 24.586 0 44.601 -20.009 44.612 -44.597 c 0.004 -11.917 -4.633 -23.122 -13.055 -31.552 C 68.321 4.65 57.121 0.005 45.188 0 C 20.597 0 0.585 20.005 0.575 44.595 M 14.658 65.727 l -0.883 -1.402 c -3.712 -5.902 -5.671 -12.723 -5.669 -19.726 C 8.115 24.161 24.748 7.532 45.201 7.532 c 9.905 0.004 19.213 3.865 26.215 10.871 c 7.001 7.006 10.854 16.32 10.851 26.224 c -0.009 20.439 -16.643 37.068 -37.08 37.068 h -0.015 c -6.655 -0.004 -13.181 -1.79 -18.872 -5.168 l -1.355 -0.803 l -14.035 3.68 L 14.658 65.727 z M 45.188 89.228 L 45.188 89.228 L 45.188 89.228 C 45.187 89.228 45.187 89.228 45.188 89.228" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(237,187,173); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path>
<path d="M 34.038 25.95 c -0.835 -1.856 -1.714 -1.894 -2.508 -1.926 c -0.65 -0.028 -1.394 -0.026 -2.136 -0.026 c -0.744 0 -1.951 0.279 -2.972 1.394 c -1.022 1.116 -3.902 3.812 -3.902 9.296 c 0 5.485 3.995 10.784 4.551 11.529 c 0.558 0.743 7.712 12.357 19.041 16.825 c 9.416 3.713 11.333 2.975 13.376 2.789 c 2.044 -0.186 6.595 -2.696 7.524 -5.299 c 0.929 -2.603 0.929 -4.834 0.651 -5.299 c -0.279 -0.465 -1.022 -0.744 -2.137 -1.301 c -1.115 -0.558 -6.595 -3.254 -7.617 -3.626 c -1.022 -0.372 -1.765 -0.557 -2.509 0.559 c -0.743 1.115 -2.878 3.625 -3.528 4.368 c -0.65 0.745 -1.301 0.838 -2.415 0.28 c -1.115 -0.559 -4.705 -1.735 -8.964 -5.532 c -3.314 -2.955 -5.551 -6.603 -6.201 -7.719 c -0.65 -1.115 -0.069 -1.718 0.489 -2.274 c 0.501 -0.499 1.115 -1.301 1.673 -1.952 c 0.556 -0.651 0.742 -1.116 1.113 -1.859 c 0.372 -0.744 0.186 -1.395 -0.093 -1.953 C 37.195 33.666 35.029 28.154 34.038 25.95" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(237,187,173); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path>
</g>
</svg></span>
<span class="visually-hidden">WhatsApp</span>
</a>
</li><li class="list-social__item">
<a href="https://maps.app.goo.gl/" class="link list-social__link" target="_blank" rel="noopener">
<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
<path d="M 45 90 c -1.062 0 -2.043 -0.561 -2.583 -1.475 l -4.471 -7.563 c -9.222 -15.591 -17.933 -30.317 -20.893 -36.258 c -2.086 -4.277 -3.138 -8.852 -3.138 -13.62 C 13.916 13.944 27.86 0 45 0 c 17.141 0 31.085 13.944 31.085 31.084 c 0 4.764 -1.051 9.339 -3.124 13.596 c -0.021 0.042 -0.042 0.083 -0.063 0.124 c -3.007 6.005 -11.672 20.654 -20.843 36.159 l -4.472 7.563 C 47.044 89.439 46.062 90 45 90 z M 45 6 C 31.168 6 19.916 17.253 19.916 31.084 c 0 3.848 0.847 7.539 2.518 10.969 c 2.852 5.721 11.909 21.033 20.667 35.839 L 45 81.104 l 1.89 -3.196 c 8.763 -14.813 17.823 -30.131 20.687 -35.879 c 0.012 -0.022 0.023 -0.045 0.035 -0.067 c 1.642 -3.406 2.474 -7.065 2.474 -10.877 C 70.085 17.253 58.832 6 45 6 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(237,187,173); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path>
<path d="M 45 44.597 c -8.076 0 -14.646 -6.57 -14.646 -14.646 S 36.924 15.306 45 15.306 c 8.075 0 14.646 6.57 14.646 14.646 S 53.075 44.597 45 44.597 z M 45 21.306 c -4.767 0 -8.646 3.878 -8.646 8.646 s 3.878 8.646 8.646 8.646 c 4.768 0 8.646 -3.878 8.646 -8.646 S 49.768 21.306 45 21.306 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(237,187,173); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path>
</g>
</svg></span>
<span class="visually-hidden">Google Business Profile</span>
</a>
</li></ul>
Can you do this for me? If I add you to my store. Thank you.
@dreamtechzone_5 I can add for desktop, for mobile it would look squeezed
@dreamtechzone_5 social icons are there at bottom already, you want to move them to right?
Here I want to add LinkedIn, WhatsApp, Google Business social icons.
@dreamtechzone_5 ok, do you have those icon images? it will purely be coding task
@dreamtechzone_5 these icons are being shown up in the footer, they are might now be shown in menu as they are not part of menu social icons
I added it before but now I can’t do it.
Can you do this for me?
Could you please send me the collaborator code so I can work on your theme?
Best regards,
Devcoder 
Thanks you so much. Need mail.
@dreamtechzone_5 yes I can do it, can you add me as collab?
Thank you so much sir. Done. If you provide instructions here, everyone will benefit, just like me.
I’ve created a duplicate theme and made the changes there. Please check it once—after that, I’ll move the code to your main theme.
Preview link - coconutbowlsshop
