Social Share
Introduction
This extension allows you to add social media platform icons to your sales channels. It helps to reach a wider audience through social media, which will ultimately lead to better sales and get more people interested in your brand. It is a great new feature for your website.
Steps to use Social Share Extension
-
Go to Extensions in Fynd Platform.
Figure 1: Extensions Section - Fynd Platform
-
Click Social Share extension.
Figure 2: Social Share Extension
noteOnce you have installed this extension, it will be available in the list here.
-
Click Sales Channel dropdown.
Figure 3: Applications Dropdown
-
Select sales channel from the dropdown list.
Figure 4: Selecting Desired Sales Channel
-
Click Configure your Application.
Figure 5: Clicking Configure Your Application Button
In the upcoming sections, you'll learn to configure Behavior and Design settings in Social Share extension.
Behavior
-
Click the first tab Behavior.
Figure 6: Behavior Tab
-
Click +Add to enter the desired social media icons to be displayed on the sales channel.
Figure 7: Clicking Add Button
-
The previous step will lead you to Title where you can select the Type from a list of over 40 social media icons. Here, we have chosen Facebook.
Figure 8: Selecting Title Type
-
Enter the Url for which the page should lead when the social media icon is clicked. For e.g., it can be the products listing page of your sales channel or a page that leads to the best deals page.
Figure 9: Add Url
-
Choose where you want the link to be opened, on a New Browser Tab or Same Browser Tab (Refer Figure 10).
Figure 10: Open Link - New or Same Browser Tab
-
Click Save.
Figure 11: Clicking Save Button
Figure 12: Social Media Icon - Facebook
-
Click +Add to add as many social media icons as you need, one at a time (Refer Figure 13).
Figure 13: Other Social Media Icons
-
Click Save.
Figure 14: Clicking Save Button
Design
There are 4 sections in this tab where you can customise the colours and the shape of the icons. Change it to suit the look of the website.
Layout
When you click Layout, it shows the App position. It displays the selected social media icons as Default or Fixed Banner.
If you click Default, follow the steps mentioned below.
- Default - When this option is chosen, the selection is made and no other inputs have to be given.
- Select Orientation - Select how the icons need to be displayed, either Horizontal or Vertical on the website.
- Icon Size - Drag the slider button to change the size of the social media icons.
- App Width - Drag the slider button to change the app width.
- Click Save.
If you click Fixed Banner, follow the steps mentioned below.
- App Position - Click Fixed Banner
- Choose Position - From the dropdown list select how the icons need to be displayed Right, Left, Top or Down.
- Offset Plugin Position - Drag and drop the slider button to change the position of the icons.
- Select Orientation - Click Horizontal or Vertical to display the icons. Vertical orientation has been chosen (Refer Figure 17).
- Icon Size - Drag and drop the slider button to increase or decrease the icon size.
- Click Save.
Color
The colour of the icons can be customised as you like.
- Icon Color - Click to select your preferred colour. The selected colour will apply to all the icons.
- Background Color - Click to select your preferred colour. The background colour changes and will apply to all the icons.
- Enable Gradient - Choose to enable or disable with the help of a toggle button. If the gradient is enabled you can blend two colours for a beautified look of the icon (Refer Figure 19).
- Click Save.
For better visibility of the social media icons, keep the colour order as a combination of light and dark colours.
Hover
In Hover, the icon colour changes when the mouse or cursor is placed over the social media icon. You can customise it to your preference for all the icons in the steps mentioned below.
- Hover Effect - Choose to enable or disable with the help of a toggle button. Place the mouse cursor on the icon (For e.g., on the right side of the page you can see Facebook icon has a different colour), the colour will change to whatever is selected in the Icon and Background colour (mentioned below). This applies to all the selected icons.
- Icon Color - Click and customise the colour. This applies to all the selected icons.
- Background Color - Click and customise the colour. This applies to all the selected icons.
- Click Save.
Borders
In Borders, you can change the edges or borders of the icons to a width of choice and customise them with different border colours.
- Border Size - Click and hold the slider button to increase or decrease the width of the border. Choose the preferred thickness. It ranges from 1px to 10px.
- Border Roundness - Click and hold the slider button to increase or decrease the roundness of the border.
- Border Color - Click to change the border colour. The colour is chosen as black for the icon border (Refer Figure 20).
- Background Shadow - From the drop-down list, select the shadow option you want. This will appear on the social media icon.
- Click Save.
Live Preview
Social media icons that are selected and customised. All the icons are displayed to get an idea of how they will look once they are customised.
Panels on the right side is to view the social media icons positioned on a website, tablet, and mobile phone. This can be viewed simultaneously while making changes.
Activating/Deactivating Social Share
Turn ON the toggle button to activate social share for sales channel.
Final Output
In this way, the Social Share extension can be customised and used to reflect the icons on your sales channel. Figures 25 and 26 below show the different customisations visible on your website.
