Social Profile

Social Profile

This element enables you to attach floating icons of your social media profiles like Facebook and Instagram.

 

  1. Go to Configure > Social.

  2. Click Social Profiles. Here, you will find all the social handles that you can link to your store.


Click x to remove the link added to that specific social profile. You can add a new one later.


How to add Social Profile Icon in your store:

 

  1. Go to Site Builder. Click Add element at the location where you want the social profiles to be displayed.

  2. Click Add element at the location where you want the social profiles to be displayed.


        3. Go to Elements >> Social profile. All the social profiles you have enabled will be displayed here.

  1. Click on the social icon to add the links to your social handle, so that it will be displayed on the site.

  2. Click Save.


The social profiles that you have added links for will be displayed in the site builder.

Click the Enable Social Profiles in top bar toggle to display the social profiles panel at the top of the site.

Click on the social profiles element to customize it.

Click Manage Social Profile to go back to the dialog where all your social profiles are listed.

  • You can add new handles to the relevant social profiles.

  • Click on x to remove the link added to that particular social profile.

 

Size:

Click the Size drop down to resize the social profile icons.

Resize the icons between :

  • Small

  • Medium

  • Large


Align:

Click on the different alignments to choose the position of the social icons. You can choose to have them:

  • Left-aligned

  • Right-aligned

  • Center-aligned


Logo Color:

You can change the color of the social profile logos. Change the logo to one of the following colors: 

  • Color Logo

  • Black Logo

  • White Logo


Backdrop:

Change the backdrop of the social profiles to enhance its look.

You can choose between:

  • Square

  • Rounded corner

  • Circle

  • (None) No backdrop at all


Background:

Click Solid color to add different colors in the background. Click Next to the color code to choose between different colors.

Click Reset to restore the default settings.

Border:

You can choose to have a solid, dashed or dotted border for your social icons. Click Next to the color code to choose between different colors.

  • Enable Even border for all sides to have the same thickness along the border. Use the up and down arrows to adjust the thickness.

  • Enable Even radius for all sides to have the same thickness along the corners of the border. Use the up and down arrows to adjust the radius in the corners.

  • Click Reset to restore the default settings.


Shadow:

This tool enables you to add shadows to your elements. You can specify if the shadow should be offset or inset. You can also customize components such as the axis, blur, and spread of the shadow.

  • Click on the color code to choose the shadow color.

  • Enable Inset to have the shadow inside the Social Icons panel.

  • Click and drag the button on Offset X to have the shadow effect along the width of the element.

  • Click and drag the button on Offset Y to have the shadow effect along the length of the element.

  • Click and drag the button on Blur to have the shadow effect along the length of the element.

  • Click and drag the button on Spread to control the shadow effect along the length and width of the element.


  • Click Add Shadow to add another shadow to the same element.

  • Click Remove Shadow to delete that shadow.

  • Click Reset to restore default shadow settings.

 

Spacing:

This tool helps you add padding and margins to the Social icons panel.

  • Enable Even Padding for all sides to evenly space the components within that element. You can also adjust the same using the arrows below.

  • Enable Even Margin for all sides to create a space between the elements around, with respect to the border.  You can also adjust the margin spacing using the arrows below.

  • Click Reset to restore default spacing settings.

 

Animation:

  • Click the Social Icons panel and click on Animation to add animation effects to the element.

  • Select a type of animation from the list of animations in the Animation Type drop down.


Select the duration of the animation from the Animation Duration drop down.

  • Enable Repeat Animation to play the animation effect repeatedly on your site.

  • Click Preview Animation to view the selected animation effect.


CSS Editor:

  • Enter your Class names in the Custom class names section.

  • You can also click Open CSS Editor to edit the same.


Show On Device:

  • This setting enables you to customize the size of your site content compatible to  the screen size of different devices, including Desktop, Tablet, and Mobile.

  • Click on the respective icons to select and unselect the devices.

Java Script Event:

You can attach javascript events to the Social profiles panel. JS events are any instance of interaction with the page, via mouse, keyboard, or forms. This particular feature requires minimal javascript knowledge.

 

To access the Javascript Events:

  1. Click on the element you would like to customize.

  2. Click the Javascript Events [] icon in the element property box.

  3. Specify the function to be applied when an event occurs.



You can have the social profiles icon not just on the home page, but on other pages as well. You just have to navigate to the other page and add the element on that page.