Theme development overview - XMPieLab/uStore-NG GitHub Wiki

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:

  1. Add product images with links to the homepage.
  2. Create a new FAQ page.
  3. Add micro animations using external packages.
  4. Add a "Contact us" form at the footer.

What can you customize?

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.

uStore NG technology

Before you start developing a theme you'll need to understand basic concepts:

  1. Setting up your environment for theme development. See Getting started
  2. Locating the files and components you'd like to edit. See Theme file structure
  3. Editing static content. See Editing HTML content.
  4. Coding dynamic content and changing Storefront behavior. See the Coding a Theme section
  5. Reading and writing uStore data using REST API. See Working with REST API