Cate

How to add social icons

23 July 2024  |  Cate

How to add social icons

Having social media profiles, and posting on them regularly, is the great way to build strong relationships with your customers and reach out to a wider audience. Once you've created your accounts, you need to make sure visitors to your online shop can find these profiles to follow you and social media icons are the way to provide easy to find links for them to use.

Add social icons to footer

It is best practice to display your social icons within your Footer. This is the common place on modern websites to find them and visitors with immediately look here. Placing them anywhere else on the site will cause confusion and they will often be missed, removing that opportunity for gaining more followers.


Adding social icons to your website

With V2 themes, adding your social icons is easy. Just follow the steps below.

  • In your admin panel, go to Settings > Integrations > Social Media tab.
  • Within the Social Media Links section, paste in the links to your relevant social media profiles and save.

    Enter your social media links to display social icons

  • Now look at the Footer on the front-end of your website and your social icons may already appear (depends on your theme, settings, and when you first created your site).
  • If you don't see any social icons, follow our How to create your Footer in V2 to add them in.

Advanced users

For designers and advanced users with good knowledge of HTML, CSS and responsive web design, you can edit how and where the social icons appear within the Footer. To do this, follow these steps.

  • To edit the HTML, go to Design > Site Theme > Advanced Editor > Footer tab.

    Footer HTML and list of Footer variables

  • At the bottom, you will find the Footer HTML field where you can alter the current HTML, add your own classes, or delete it all and add your own HTML.
  • The list of all variables that can be used within the Footer, including the social icons one, are listed underneath.
  • The styling can then be altered by editing or adding your own CSS to Additional CSS field in the Pages tab.
  • You can also use the Responsive CSS field, in the same tab, to adjust the styling and layout for smaller screens, if needed.

Recommended reads

Try Bluepark for FREE for 14 days

Full access to everything including our support team, no card details required