We've added a perfect way to show your featured social media posts! The social stories section enables you to manually highlight some of your social media posts and even enable a shop the look function on it!
Here's a quick sneak peek:
How to add this section:
To add an social stories section to your store;
Click on 'add section' which can be found in your left sidebar.
Scroll down, or search for 'Social stories', then click on 'Social stories'.
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 stories
Image ratio:
Set the ratio of the images, so you can customize the look of the images. Set it to 75% for landscape, 100% for square and 125% for portrait.
Show images in circle:
When the image ratio is set to 100% and this option is checked, the images will show in a circle instead of square, landscape or portrait.
Images per row:
Set the amount of images you want per row. If there are more images selected than can be on screen, the section will add a slider option to slide between the images.
Space between banners:
Set the space between the images. How larger the space, the less images can be on screen.
Heading position
Set the position of the heading text 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
Description:
Fill in the text of the section, this will be under the title.
Button
Button label:
This text will show on the button, for example: 'View all'
Link:
Enter a link for the button, for example to your products sale page.
Button color scheme:
Set the colorscheme of the buttons within the section.
Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.
Description position:
Set the position of the description, this can be left or center.
Description fontsize:
Set the fontsize of the description.
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:
How to customize the social stories?
By default, there are 5 social stories images added, you can edit them, remove them or add more.
1. Editing the image banners:
To edit the blocks you simply click on the block you want to edit in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the following sidebar will open.
Social Story
Image:
Set your images here, for example your most populair post on facebook!
Video:
Instead of an image, you can also choose to show an inline video. This will override the image setting.
Description:
Set the discription of the image/video. This can be a summary or short version of your social post.
Link:
Set the link to your post, so when clicked the visitor can read the whole post!
Shop the look feature
With the "Shop the Look" feature, you can tag each banner within the section, linking it directly to the corresponding products in your Shopify store. Customers can simply hover click on the cart icon to view more details, including products variants, their prices, and the option to add them to their cart. This streamlined process eliminates the need for customers to manually search for each item separately, providing a seamless and efficient shopping experience.
Enable Shop the look feature:
The setting says it all, check this box if you want to enable the shop the look feature!
Products:
You can select up to 12 products to show in the shop the look box.
Color scheme:
You can change the icon color scheme using the option.
Position:
And position it from left to right.
You can also add a label over image:
I hope this documentation is useful to you. If you have any questions feel free to click on the chat icon and send us a message.