Wix Editor: Adding and Setting Up a Social Bar on Your Mobile Site

4 min read
Adding a social bar to your mobile site can help you gain followers on social media and expand your online presence. This also allows visitors to keep up to date with you and your brand, straight from their mobile devices.
screenshot of mobile site named gemmas flower shop. site has grey social bar.
Important:
This is a mobile-only element, which means it does not appear in the desktop version of your site. Alternatively, you can use the same social bar element from your desktop site on your mobile site

Step 1 | Add a social bar to your mobile site

Add a social bar to begin encouraging your visitors to subscribe to you on social media. There are a variety options to choose from, including different color and icon options. You can also customize and adjust the bar to match your site's look and theme.

To add a social bar to your mobile site:

  1. Click Add to Mobile  on the left side of your mobile editor.
  2. Click Social.
  3. Select the social bar you want to use or click and drag it onto your page. 
screenshot of add to mobile site panel.

Step 2 | Manage the icons on your social bar

Customize every detail to perfectly suit your social network needs. You can add more icons (representing other social networks), delete those you don't need and reorder the list according to your personal preferences. 
You can also replace the existing icons with different designs to ensure the social bar suits your site's theme. 

To manage the icons on your social bar:

  1. Click your social bar in the mobile editor
  2. Click Set Social Links.
  3. Choose what to do next:
    • Add more social networks: Click + Add Icons at the top right and select the relevant icon.
    • Remove social networks: Hover over an icon and click the Remove Image icon  to delete it.
    • Reorder the icons: Drag and drop the icons as needed.
  4. (Optional) Replace the icons to different designs:
    1. Click the icon you would like to change.
    2. Click Replace Icon on the right.
    3. Upload your own image, use one of your site files or explore our large variety of free icons offered by Wix.
screenshot of set soclial link panel displaying all icons on social bar

Step 3 | Connect your social media accounts

Link the icons to the relevant social media accounts to encourage your visitors to see more of you and your brand's content. Connecting your accounts allows your visitors to subscribe, add, or follow you in a few easy clicks.

To connect your social media accounts:

  1. Click your social bar in the mobile editor.
  2. Click Set Social Links.
  3. Click the icon you want to connect. 
  4. Click the field under What social page does this icon link to? on the right. 
  5. Select Web Address.
  6. Enter the URL of your social media account in the What's the web address (URL) field. 
  7. Choose how you want the link to open: New window or Current window
  8. Click Done.
  9. Repeat steps 3-8 for all of your icons.
screenshot of set soclial link panel displaying all icons on social bar

Step 4 | Adjust the layout of your social bar

Change the layout of your social bar to suit your site's alignment. You can change settings such as the spacing, and the direction.

To adjust the layout of your social bar:

  1. Click your social bar in the mobile editor.
  2. Click the Layout icon .
  3. Adjust the layout using the following options:
    • Icon size: Drag the slider to increase or decrease the size of the icons.
    • Spacing: Use the slider to make the spacing between icons smaller or bigger.
    • How does the bar look?: Select whether the bar is displayed horizontally or vertically.
screenshot of social bar layout panel.

Did this help?

|