Skip to main content
Section: Social media bar
Nick Paul avatar
Written by Nick Paul
Updated over a year ago

We've added a perfect way to show your social media presence! The Social media bar section enables you to add a social bar to link your customers to your social media profiles.
Important note: You can set the URL to the icons within the theme settings!

Here's a quick sneak peek:

How to add this section:

To add an social media bar section to your store;

  1. Click on 'add section' which can be found in your left sidebar.

  2. Scroll down, or search for 'Social media bar', then click on 'Social media bar'.

  3. Done, your slideshow section is added.

General Settings:

The general section contain the settings for layout and spacing. To open the general settings click on the section:

Social media bar

Color scheme:
Set the color scheme of the section, this includes the social media icons

Active color scheme:
Set the color scheme of the active icons, this means the color of the icons when the visitor is hovering over the icon.

Icon width:
Set the width of the icons.

Show in circle:
This option is enabled by default, disable this option to show the icons without a circle on the background.

Content position:
Set the position of the content within the section.

Headings

Heading settings:
The social media bar has these headings: Primary and secondary in each setting you will see options to fill your desired headings and customize the font size for headings and choose the right font that works for you.

Text

Text:
Fill in the text of the section, this will be under the title, but above the icons:

Custom text styling

Enable custom text styling:
Custom text styling allows you to overwrite the standard typography settings. This way you can customize al your banners in a great and unique way! Enable the option and let your creativity go!

Spacing

Bottom spacing desktop/mobile: That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

Control the stacking order of sections:
Increase or decrease the z-index value to control the visual layering of sections, ensuring the desired display arrangement when using negative spacing.

When we increase the z-index, the section will overlap:

Did this answer your question?