Enable Merchants to Drag and Drop Content Onto Their Site

Widgets allow merchants to drag and drop specialized functionality onto storefront pages. Once you develop a widget, a merchant can use Site Builder to add third-party functionality, update content to highlight new promotions, test the look and feel of different image arrangements, and much more, all without requiring a developer's assistance. The following steps guide you through the process of creating a widget, and link to help topics with more details for each step.

  1. Learn What Themes Are Capable Of

    Before you begin, get a primer on the capabilities of themes. Currently, widgets are a component of themes, so you have to create a theme to create a widget.

  2. Create a Theme Using the Kibo eCommerce Theme Generator

    Now that you have an idea of what themes are all about, create a theme record in Dev Center, and then use the Kibo eCommerce Theme Generator to create a theme based off the Kibo eCommerce Core theme. The easiest way to get started is to complete the Theme Quickstart, or refer to the Theme Asset Management topic.

  3. Configure Settings for Your Theme

    Themes allow you to add custom settings in the theme.json file so that you can then access them in your widget templates, script files, or stylesheets as variables whose value can be changed from a central location. You can also create theme settings in the theme-ui.json file. Admin users can later modify the settings in this file within Site Builder.

  4. Create a Widget

    As a theme developer, you add dropzones to Hypr templates using the dropzone Hypr tag. Dropzones define areas where merchants can use Site Builder to drag and drop widgets onto a page. Kibo eCommerce provides many built-in widgets, but you can also add your own custom widgets by specifying widget metadata in your theme settings, creating a Hypr template for your widget, and if needed, creating widget stylesheets and JavaScript files.

  5. Leverage the Theme Reference

    To get the most out of of your widget template, learn about the available tags and filters that add dynamic functionality to your site and help reduce the amount of code you need to write. You can also learn about the accessible global variables in Hypr, which provide you details about the current page context, the user visting your site, the product information on a particular page, and other useful information.

  6. Install and Publish Your Theme

    When you are ready to test your theme (which includes your widget), you install and enable it on a sandbox. When you're finished developing, publish your theme as a final version (you can then version your theme for subsequent releases).

  7. Show Site Builder Users How to Use Your Widget

    If necessary, install and enable your theme on your merchant's sandbox. Admin users can then use Site Builder to drag and drop your widget onto the storefront page(s) of their choosing.


Related Topics

View the Complete Set of Theme Topics

Create Robust Widget Menus

Use Documents to Create Custom Editors

home Go Back