Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I would like to have a header in the footer of my website with social icons below the header - Instagram, line, YouTube, Twitter - that are coloured and around 30px in size, and that can be clicked to jump.
But my code always affects the other header positions, I would like to ask if anyone knows what is going on?
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.social-icons-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.social-icon {
transition: color 0.2s;
list-style: none;
margin-right: 15px;
text-decoration: none !important;
}
h1 { display: flex; align-items: center; justify-content: flex-start; color: black; } /* 这里是添加的一行 */ h4 { margin-bottom: 20px; } </style>
<center>
<h4 style="text-align: left;">FOLLOW US</h4>
<div class="social-icons-container">
<!-- Add font awesome icons -->
<a class="social-icon" href="https://line.me/R/ti/p/%40216jcszk" target="blank">
<i class="fa-brands fa-line fa-2xl" style="color: #03c552;"></i>
</a>
<a class="social-icon" href="https://twitter.com/dcodeyt" target="blank">
<i class="fa-brands fa-twitter fa-2xl" style="color: #0d8af0;"></i>
</a>
<a class="social-icon" href="https://www.instagram.com/nonnico_official/" target="blank">
<i class="fa-brands fa-instagram fa-2xl" style="color: #fe056e;"></i>
</a>
<a class="social-icon" href="https://www.youtube.com/@nonnico356" target="blank">
<i class="fa-brands fa-youtube fa-2xl " style="color: #fe0000;"></i>
</a>
</div>
</center>
What I understand is that you want to add social icons in the header of your website.
If so, then I can help you with this. But I have to make changes in your theme code to get the desired output.
let me know if I can access your theme code to help you.
To help you with this we need some more information about your store. Share your store URL and help us with your store credentials so that we can check the issue at our end and let you know the best possible solution.
Regards,
CedCommerce
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025