Managing Store Widgets

Widgets are pieces of code that can be added to specific locations in the theme, to allow the storefront to support new functionality.

Before the introduction of widgets, in order to enhance the functionality of the AquaBlue theme, you had to create a custom theme. For example, footer, promotional text or banner, could only be added by creating a custom theme. The Aqua Blue theme comes with the option to add this information in the form of widgets, to be added to designated areas in the store. All you must do is connect a widget to a location and set its values.

You can develop a widget that matches your requirements, select one of the out-of-the-box widgets, or purchase a widget from XMPie Professional Services, and upload it to uStore.

You will then designate the location (slot) on the storefront page where the widget will appear, followed by some configuration of the widget.

In the Widgets Management page you can upload widgets, to be then associated with the theme in the theme editor.

To upload widgets:

  1. Click Global Settings > Widgets.

    The Widgets Management page shows all widgets that have been uploaded.

  2. Click Upload Widget to upload the widget file.

  3. Set the widget to Active to make it available for selection in the theme editor.

You can now assign each widget to a specific location (slot) in the Widgets section of the theme editor.

Each widget is configured in JSON, and lists its own fields in the configuration help text displayed next to it. Where a field takes an image, it takes the image's full URL. See A widget's image does not appear.

If the widget file is not accepted

The .zip file has to be produced by the widget project's build script. A folder that you compressed yourself is not accepted, even when it contains the right files, and a widget package contains more than config.json. If the upload fails, build the widget again and compare your project against a sample widget. See Develop your own widget.

Developer documentation

Widget development is documented outside this help, in two GitHub wikis:

  • uStore NG wiki - XMPie's developer documentation for themes and widgets, including Widgets and Develop your own widget.

  • uStore-js wiki - Code samples for extending and customizing uStore, contributed by users. These samples are not written, provided, tested or supported by XMPie, so test them on a development server first.

More topics

Setting Up Adobe Express Widget