Social Media Icons: Follow and Share App User Guide for Ecwid

July 5, 2024 21 view(s)
Social Media Icons: Follow and Share App User Guide for Ecwid

The Social Media Icons: Follow and Share app makes it easy for visitors to engage with your brand. It adds a sticky bar that stays visible as they scroll, allowing them to follow you, reach out on social media, or share your website content with their friends in just a click.

Supported Social Media Platforms

The app currently supports the following social media platforms for the Sharing feature:

  • Facebook, X, Pinterest, WhatsApp - you can enable Follow Us, Sharing, or both for these platforms.

For the Follow Us feature, the app supports:

  • 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. The left side contains settings for managing your social media icons, while the right side shows a live preview of how the social media bar will look on your website - desktop and mobile preview mode available. To update the preview, click Save after making changes.

Social Icons App Interface

 

Adding Social Media Icons

Click the Add Icon button to include it in your social media bar. 

Add social media icon

 

Select your preferred social network from the list. If the platform you need isn’t available, choose the Custom option to upload your own icon.

Select icon to add to website

 

The icon configuration page will open. Here you’ll see three main sections:

 

  • Allow users to follow - enable this option to allow visitors to access your social media profile with a click. You can also add hover text that appears when users hover over the icon.
  • Allow users to share - enable this option to allow visitors sharing your website pages on social media. Set a sharing title and description, which will be automatically included in the user’s post or message. Choose which page to share: homepage, current page, or a custom URL.

Note

This option is currently available only for Facebook, X, Pinterest and WhatsApp. 

 

  • Additionally, Hide the icon on desktop or mobile by toggling the corresponding option.

Once configured, click Save to apply your changes.


If both the follow and share options are enabled for an icon, visitors will see both options and can choose the one they prefer when clicking the icon on the frontend.

Follow and Share feature

 

The added icon will appear in the Icons section, where you can rearrange the order by simply dragging and dropping them. Here, you can also Edit or Delete it by clicking “”.

 

 

Settings

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

Add icon and settings option

 

Layout settings

In Settings, open Layout settings to customize the following:

  • Icon position - choose from right, left, top, or bottom.
  • Orientation - set the bar to be vertical or horizontal.
  • Icon size - select from tiny, small, normal, or big.

Click the Save button to apply the changes.

 

Icon style

Return to Settings and open Icon style to customize the following:

Icon style configuration

  • 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 from circle, rounded, or square options.
  • 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.