Skip to main content

Using Social Share Extension

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

    Figure 1: Extensions Section - Fynd Platform

  2. Click Social Share extension.

    QG1

    Figure 2: Social Share Extension

    note

    Once you have installed this extension, it will be available in the list here.

  3. Click Sales Channel dropdown.

    QG1

    Figure 3: Applications Dropdown

  4. Select sales channel from the dropdown list.

    QG1

    Figure 4: Selecting Desired Sales Channel

  5. Click Configure your Application.

    QG1

    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

    Figure 6: Behavior Tab

  2. Click +Add to enter the desired social media icons to be displayed on the sales channel.

    QG1

    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

    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

    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

    Figure 10: Open Link - New or Same Browser Tab

  6. Click Save.

    QG1

    Figure 11: Clicking Save Button

    QG1

    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

    Figure 13: Other Social Media Icons

  8. Click Save.

    QG1

    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

Figure 15: Design - Different Sections

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

Figure 16: Layout - App Position (Default)

  • 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

Figure 17: Layout - App Position (Fixed banner)

  • 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

Figure 18: Color

  • 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

Figure 19: Color - Enable Gradient

note

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

Figure 20: Hover

  • 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

Figure 21: Borders

  • 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

Figure 22a: Live Preview

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

Figure 22b: Panels


Activating/Deactivating Social Share

Turn ON the toggle button to activate social share for sales channel.

QG1

Figure 23: Activating Social Share Extension


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

Figure 24a: Horizontal View

QG1

Figure 24b: Vertical View with Hover effect