Storefront themes

Abstract

Overview of the themes that you can use in the design process including the Wireframe theme, the Storefront Mock-up theme, and the Storefront Branded Theme.

A theme defines the look and feel of a storefront and can be created separately from the site functionality and content.  Themes contain CSS, JavaScript, images, and fonts. The Storefront comes with a number of themes that you can use in the design process or perhaps they will provide inspiration when you create new themes for your site. When you create a site, you must select a theme. You can, however, assign a different theme at any point after site creation.

This topic describes the intended use of each of the themes that are included with SXA and the Storefront. With the different themes, Sitecore supports a design process where you start out planning the information architecture, functionality and navigation of the site, then create a mock-up with content, and finally create a storefront with a branded theme.

Note

SXA and the SXA Storefront together come with the Wireframe theme, the Storefront Mock-up theme, and the Storefront Branded theme. To deliver more complicated functionalities, use the commerce base themes.

Warning

Do not modify the themes provided with the SXA Storefront solution. Follow the recommended best practices. Any changes to the themes may be overwritten when the solution is updated.

The Storefront Branded theme is an example of a final design created by a design agency. It has a branded look and feel and can serve as inspiration when you create a new branded theme for your company storefront.

For example, the Registration rendering with the Storefront Branded theme looks like this in the Experience Editor:

The Registration rendering with the Storefront Branded theme in the Experience Editor.

The Registration rendering with the Storefront Branded theme looks like this on the live Storefront template site:

The Registration rendering with the Storefront Branded theme in the Storefront template.

When you create a new commerce site you can choose to create a new theme. The new theme includes support for the commerce renderings. The support does not include layout and the component styling is minimal. The custom theme can be used as a wireframe theme, or you can modify it.

For example, the Registration rendering with an un-styled custom theme looks like this:

The Registration rendering with an un-styled custom theme.

The theme includes all the component Sass files (some of the files are empty.) This makes it easier to export the theme using Creative Exchange.

The Wireframe theme is typically the theme that you use when starting to design a new site. You are likely to use this theme while working on the information architecture, business objectives, user flows, and primary usability issues. During this stage, you might share the site with colleagues for internal reviews and iterations.

Note

The Storefront does not fully support the Wireframe theme that comes with SXA.

Note

Mock-up themes have been discontinued and, for this reason, have "deprecated" appended to the theme name. To browse to them in the Content Editor, you navigate to the sitecore/Media Library/Themes/Storefront deprecated folder. You can, however, still use these themes when you create new sites.

The Storefront Mock-up themes are examples of the type of theme that you would use when you start updating your site with content such as texts, labels, and images.

SXA makes it easy for you to separate content from presentation, so you and your colleagues can work on content and design in parallel. This means that you can start adding content to the site as soon as the information architecture and the user flows have been determined.

The Storefront Mock-up themes are grayscale themes that give a more finished look to the site, while they are clearly not the final design.

You would typically create a mock-up theme in an iterative process as the overall design of the site begins to take shape. A designer in your company or an external design agency would use the mock-up theme as a starting point to create the final branded theme.

SXA Storefront comes with two mock up themes. The Storefront Mock-up with product images theme displays the original images from the catalog while the Storefront Mock-up with mock images theme displays generic gray scale images in place of the product images.

For example, the Registration rendering with either Storefront Mock-up theme looks like this in the Experience Editor:

The Registration rendering with either Storefront Mock-up theme in the Experience Editor.