What is a story widget
Almost everyone who uses social media is familiar with the concept, now you can bring it to your store with a Stories widget.
A Stories widget displays a collection. When a visitor taps one of the items in the collection the display switches to a full screen view of products from that collection which are automatically rotated in a similar way to how stories work in social media apps. When the visitor sees an item they like they can scroll up to visit its product page.
Below you can see a stories widget displaying a categories collection:
After tapping on one of the categories products relevant to the selected collection are shown one after the other. This includes a combination of personalized items and best sellers:
 |
Setting up a Stories widget
Create a collection
Choose the items from the collection that you will feature in the widget
Create a Stories widget rule that will use the collection you prepared
Customize the display of the widget and the product within each story.
Test the widget
Activate it to all visitors
Creating a Collection
A collection of products is tied to a product attribute. The most common attributes that are applicable to almost every store are Categories and Brands (the categories of the products available for purchase and their brands). However stories widgets can be created that showcase almost any type of attribute.
To create a collection go to the Media Library section under Onsite Personalization
Next click on New Collection by Attribute at the top right. Select the attribute you would like to use and name the collection.
Note: Collections can also be used in other Barilliance features such as Content Personalization so pick a name that will make it easy to find out where it is used, for example "Categories - Stories".
Note: Remember that attributes are created based on the data in your product feed. If you can't find the attribute you are after and it is included in your feed please contact us at support@barilliance.com
Choosing the items that will be featured in the collection
Click on New Item in the top right of the media library
Select the attribute the story will cover at the bottom of that window
Add an image URL
Add optional text that will be displayed together with the story
Click on Create to add the new item to the collection
Activate those items you will showcase in the widget
The image I plan to use here will not have any text in it so I added "Bedroom" in Text1 so the my visitors know the type of products they will see when tapping the image.
Next I activate the items I created:
Creating a stories widget rule
Create a Stories rules from New Action > Stories widget
Select the collection to use
Select one of the pre-defined templates
You can preview how the default widget will look and behave by clicking on the preview tab.
Customizing the widget
The Stories Widget tab allows you to customize how each story looks. The Stories Views tab allows you to customize how each item inside the story will look. Both work in a similar way.
On the left you have a list of sections such as image and text1 clicking on each allows you to customize the section. You can also add new sections. For example if you'd like to display the item's price add a new text section and choose Current Price as the Data Source:
As you make changes the preview window at the bottom updates so you can see the results.
Positioning the widget
You position the widget by specifying a CSS selector if you're not familiar with them shoot us a message at support@barilliance.com and we'll be happy to assist.
Testing the widget
Since the stories widget is designed to be displayed in mobile the recommended way to test is in a real mobile device. There two separate ways to do that:
Click on the Preview Rule button at the top right of the screen then copy the preview link from your desktop browser and send it to your mobile device
Add the IP segment to the rule and activate the rule but only to the IP address of your mobile device
