# 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 1. Go to **Extensions** in Fynd Platform. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/1.png) Figure 1: Extensions Section - Fynd Commerce 2. Click **Social Share** extension. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/2.png) Figure 2: Social Share Extension Once you have installed this extension, it will be available in the list here. 3. Click **Sales Channel** dropdown. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/3.png) Figure 3: Applications Dropdown 4. Select sales channel from the dropdown list. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/4.png) Figure 4: Selecting Desired Sales Channel 5. Click **Configure your Application**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/5.png) 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 1. Click the first tab **Behavior**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/6.png) Figure 6: Behavior Tab 2. Click **+Add** to enter the desired social media icons to be displayed on the sales channel. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/7.png) Figure 7: Clicking Add Button 3. 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**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/s8.png) Figure 8: Selecting Title Type 4. 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/9.png) Figure 9: Add Url 5. Choose where you want the link to be opened, on a **New Browser Tab** or **Same Browser Tab** (Refer Figure 10). ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/10s.png) Figure 10: Open Link - New or Same Browser Tab 6. Click **Save**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/11s.png) Figure 11: Clicking Save Button ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/12.png) Figure 12: Social Media Icon - Facebook 7. Click **+Add** to add as many social media icons as you need, one at a time (Refer Figure 13). ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/13.png) Figure 13: Other Social Media Icons 8. Click **Save**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/14.png) 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/15.png) center em Figure 15: Design - Different Sections br #### 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/16.png) center em Figure 16: Layout - App Position (Default) br * **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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/177.png) center em Figure 17: Layout - App Position (Fixed banner) br * **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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/188.png) center em Figure 18: Color br * **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**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/22s.png) center em Figure 19: Color - Enable Gradient br 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/199.png) center em Figure 20: Hover br * **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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/20s.png) center em Figure 21: Borders br * **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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/21.png) center em Figure 22a: Live Preview br 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/22.png) center em Figure 22b: Panels br ## Activating/Deactivating Social Share Turn ON the toggle button to activate social share for sales channel. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/23s.png) center em Figure 23: Activating Social Share Extension br ## 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/24.png) center em Figure 24a: Horizontal View br ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/social-share/25s.png) center em Figure 24b: Vertical View with Hover effect br