-
Notifications
You must be signed in to change notification settings - Fork 3
Theme development overview
uStore NG is a technology that enables you to customize the content and behavior of the Storefront.
Customization is defined by a theme, which contains HTML, code and a CSS.
Make sure you have read Prerequisites before you begin.
Here are a few examples of what you can achieve with theme development:
- Add product images with links to the homepage.
- Create a new FAQ page.
- Add micro animations using external packages.
- Add a "Contact us" form at the footer.
uStore NG technology is present in a few pages and components of the Storefront: homepage, category page, header and footer. Kit products (available since version 11.1) are also created using NG technology. These pages can be customized with the new theme technology. All other pages (such as cart, checkout) have a header and footer in the new technology, and an iFrame that shows the main content in the old ASP.net technology. More pages will be converted to the new technology in the coming versions.
Before you start developing a theme you'll need to understand basic concepts:
- Setting up your environment for theme development. See Getting started
- Locating the files and components you'd like to edit. See Theme file structure
- Editing static content. See Editing HTML content.
- Coding dynamic content and changing Storefront behavior. See the Coding a Theme section
- Reading and writing uStore data using REST API. See Working with REST API
uStore NG Themes
uStore NG Extensibility
Theme customization overview
Editing CSS variables
Editing the CSS
Migration from Legacy to NG
Theme development overview
Getting started
Theme file structure
Publishing the theme
Upgrading a Custom Theme
Editing HTML content
Adding a new page
Adding assets
Adding a component
Customizing a skin
Modifying CSS variables
Editing fonts
Adding JavaScript
uStore library
Working with REST API
Accessing uStore data
Managing custom state
Working with localizations
General services
Adding an external package
Customizing the Theme Editor
Theme tips and tricks
uStoreProvider Reference
Tax Webhook
Order Approval Webhook
Manufacturer Webhook
Widgets
Cart Export Webhook
Input Control Development Guide
Using uStore as a web component