Overview

The Sidebar widget can be configured to display in a number of different ways. The following display scenarios are supported:

1. Default floating icon only
2. Default floating icon only, but with a custom icon
3. Default floating icon + Custom Selector
4. Custom Selector only

Default floating icon only

This is the default display of the widget. By default, the Sidebar widget will display as the following:

Default floating icon only, but with a custom icon

The default floating icon can be customised in the following ways:

1. Color
2. Icon

In order to customise your icon, head over to the Embed settings:

Default floating icon + Custom Selector

In addition to the default floating icon, you can add your own custom selector that launches the Sidebar widget. This can be any element you like - a button, a menu item, a link etc. To do this, you must add the onclick function Productstash.show() to the element, for example:

<div id="example" onclick="Productstash.show()">What's new</div>

Custom Selector only - hide the default icon

The Sidebar widget can be triggered by a custom HTML element which will then replace the default bell icon.

To get started, you need to add the custom HTML element to your webpage(s), and the element needs a unique ID; for instance:

<div id="example">What's new</div>

Once this has been added to your webpage(s), head over to your Embed Code settings page, and add your custom HTML ID (in this case, the example is "#example") and ensure the 'Use custom HTML selector' is on:

Save these settings, and your custom element will now override the default Sidebar bell.

Functions

The Sidebar widget has a number of available functions that can be called manually to perform various behaviours. This is an ever-growing list, check back regularly for new operations, or request new features.