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.
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.
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.
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.
Create a Widget
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.
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).
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.