Articles
What You Can Do With Themes
Themes give you complete control over your storefront's frontend experience. With themes you can design snazzy home pages, tailor product and category pages to your liking, customize email templates, create specialized widgets that allow merch...
Get Started with Themes
This tutorial guides you through all the major facets of theme development, including editing project assets on your local machine, uploading themes to Dev Center, and applying themes to sites using Site Builder in Admin. At the end of the tutoria...
Theme Structure
The project files in which you develop themes have the directory structure shown in this topic. You can use the Theme Generator to automatically scaffold these files. folder admin Contains features that extend menus in Admin. This dire...
Theme Settings
The primary files that determine theme settings are located in the theme root directory: theme.json and theme-ui.json . Theme settings determine options for your site such as metadata, default fonts, product image sizes, content types, and more...
Hypr Templating System
Kibo provides the Hypr templating system to facilitate the design of your web pages. Templates specify how to generate the HTML on your site—within a template, you specify the location of static and dynamic content on a page. Many web framew...
Widgets
Widgets provide merchants with total control over site content within select areas of the storefront. As a theme developer, you add dropzones to Hypr templates using the dropzone tag. Dropzones define areas where merchants can use Site Builder t...
Editors
Editors are JavaScript files that allow you to create robust UIs for widget, document, and entity configuration menus in Admin. Editors leverage form controls and Ext.js to create menus. The following are examples of editors in action: Widget E...
Labels
You can customize the labels and messages that shoppers see on your storefront by editing your labels file. The Core theme includes a default list of labels in the labels/en-US.json file, but you can also add your own custom labels to the file. ...
Stylesheets
As is industry standard, you set the visual style of your site using CSS. On top of the benefits of CSS, Kibo themes provide a clear directory organization to enhance the separation of site content from site presentation, while also leveraging a L...
JavaScript
JavaScript is an essential internet technology. When developing themes, you will likely use JavaScript in the following ways: On your storefront, in the shopper's browser (using HyprLive). In the editors that display custom menus in Admin...
Email Template Customization
While the other guides in this Themes category detail the technical elements and configuration of a theme, sometimes a non-developer user may have to interact with the theme as well. For example, a marketing representative may simply need to edit ...
Maximize Theme Performance
When designing themes, it is important to keep page load times to a minimum. Small load times result in a range of benefits, chief among which are shopper conversions and better SEO results. Consider the following guidelines to minimize page load ...
Theme Reference
The Kibo eCommerce Core theme is the foundation upon which you can build your own Kibo eCommerce theme. You can view the latest Core theme files on Github . Hypr and HyprLive Syntax Hypr and HyprLive share many syntax features, but differ i...
Synthesized Mode
Synthesized mode has been used to help upgrade implementations from the previous version of eCommerce into Unified Commerce. It is used to get shipment status data from the Order API and displays this information on the My Account page of the stor...