How to Keep Your Social Media Icons by Your Side

Hey there, savvy Flatsome users! Ever felt like something was missing as you scrolled down your WooCommerce site? Perhaps it was your social media icons saying, “Hey, don’t forget about us!” Well, worry no more! I’ve cooked up a nifty little solution that keeps your social media pals visible and chic, no matter where your visitors wander on your page.

Introducing the fixed social media sidebar—a sleek, vertical charm that sticks with you through thick and thin (or should we say, through long scrolls and quick swipes). This stylish addition to your Flatsome theme ensures that your social media icons are always in sight, encouraging more follows and likes as a result. Neat, huh?

Why You Need This?

In the age of connectivity, making it as easy as pie for your visitors to check out your social media platforms is a no-brainer. Plus, it’s a fantastic way to boost your brand’s visibility and engagement without being too pushy. It’s like having a polite but persistent friend who subtly reminds guests, “Hey, check us out on Instagram too!”

Setting It Up is a Breeze!

To implant this smooth operator into your site, just navigate to Flatsome > Advanced > Global Settings > Footer Scripts. Here, you can drop in the code to bring this fixed social media sidebar to life. Don’t worry about scrolling up and down to find the right spot; this sidebar is the ultimate clingy companion—it sticks!

This freely available code is locked down.

Log in or create an account to access our magic code.

Sign Up / Login

<style>
  .fixed-social-medias-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: fixed;
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background: #fff;
    border: 1px solid #EAEAEA;
    border-right:unset;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

.fixed-social-medias-container a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #000000;
    transition:background 0.3s;
}

.fixed-social-medias-container a:hover {
    background: #F2F1F6;
}

.fixed-social-medias-container a img {
    width: 20px;
    height: auto;
}
</style>

<div class="fixed-social-medias-container">
    <a href="https://www.facebook.com" target="_blank"><img src="https://flatmore.co/wp-content/uploads/2024/05/fb-i.svg" alt="Facebook"/></a>
    <a href="https://www.instagram.com" target="_blank"><img src="https://flatmore.co/wp-content/uploads/2024/05/ig-i.svg" alt="Instagram"/></a>
    <a href="https://www.instagram.com" target="_blank"><img src="https://flatmore.co/wp-content/uploads/2024/05/wp-i.svg" alt="Whatsapp"/></a>
</div>

Conclusion:

Customization? No Problem!

Want to add more icons? Easy peasy! Just replicate the <a> tag within the code for each new social platform you want to include. This way, whether you’re all about Facebook, can’t get enough of Instagram, or are curious about the latest on Twitter, adding them to your sidebar is just a few clicks away.

Need a Hand?

If tweaking code isn’t your cup of tea or if you’re itching to add a splash more customization, fear not! Flatmore is here to help. Drop us a line, and we’ll assist in making your social media sidebar as unique as your brand.

Thank you for spending your time with us by visiting our blog and reading our articles.