Social Media Icons: Sticky Bar App User Guide for Ecwid

The Social Media Icons Bar app helps you connect with your audience by prominently displaying your social media profiles on your website. This app creates a sticky bar that stays visible as visitors scroll through your site, making it easy for them to follow you or contact you.

Supported Social Media Platforms

The app currently supports the following social media platforms:

• Facebook
• LinkedIn
• TikTok
• X
• Instagram
• Discord
• Telegram
• Messenger
• Line
• YouTube
• Vimeo
• Etsy
• Tumblr
• WeChat
• WhatsApp
• Threads
• Fiverr
• SoundCloud
• UpWork
• Pinterest
• Reddit
• Spotify
• Github
• Snapchat
• Viber
• Yelp
• VK
• Twitch
• Weibo.

App Interface Overview

When you open the app, you'll see a split-screen layout:

1. Left-hand column: This area is dedicated to managing your social media icons. 
   It includes the following elements: 
   The Settings button at the top of the page allows you to customize the style and layout of your icons.
   Names of Social Networks: A list of available social networks. 
   Icons: Visual representations of each social network. 
   Toggle Switch: Activate this switch to add the corresponding icon to your social media bar. 
   Edit Button ( ... ) : Access finer settings for each icon by clicking this button.
2. Right-hand column: This section provides a preview of how your social media bar will appear on your website. To see your changes in the preview, click “Save” after making adjustments to the icons on the left.

Adding Social Media Icons

To add an icon to the sticky bar, simply toggle the switch next to the desired icon in the left-hand column.

Customize Icon Settings: Click [...] edit button 

• Name: The name of the social media platform.
• Profile URL: Enter the exact URL of your social media profile. This is essential for the icon to appear on the bar.
• Hover Text (optional): Add text that will display when users hover over the icon on the desktop.
• Show on Mobile: Toggle to display or hide the icon on mobile devices.
• Show on Desktop: Toggle to display or hide the icon on desktop devices.

Don't forget to Save Changes: Click the "Save" button to apply your settings.

You can arrange the order of social icons in the bar by simply dragging and dropping them.

Settings

To customize the style and layout of your icons, click the Settings button at the top of the page.

Layout

In Settings, open Layout to customize the following:

• Icon Position: Choose from right, left, top, or bottom.
• Bar Orientation: Set the bar to be horizontal or vertical.
• Icon Size: Select from tiny, small, normal, or big.

Click the Save button to apply the changes.

Style

Return to Settings and open Style to customize the following:

• Icon Style: Use the left or right arrows to select from the available styles.
• Background Color: Choose native, dark, or light backgrounds for the icons.
• Icon Color: Choose native, dark, or light colors for the social media symbols.

Note: Use contrasting background and icon colors to ensure the symbols are clearly visible.

• Icon Shape: Select the shape—circle, rounded, or square.

• Hover Effect: Enable the toggle to change the background or icon color when hovered over.

Click the Save button to apply the changes.

Tips for Effective Use

• Create Different Icon Sets: Tailor the icons displayed on mobile and desktop devices to optimize for each screen size. For example, prioritize messaging apps on mobile for quick customer support.
• Enhance Customer Support: Include messaging and chat platforms in your social media bar to provide easy access to support.

By following these steps and incorporating strategic tips, you can effectively utilize the “Social Media Icons: Sticky Bar” app to increase your social media following and improve customer engagement on your website.