SXA Storefront themes
The SXA Storefront comes with a number of themes that support you through the design process. You can use them for inspiration when you create new themes for your site.
You must not modify any of the themes provided with the SXA Storefront solution. Any changes to the themes may be overwritten when the solution is updated.
This topic describes the intended use of each of the themes that are included with SXA and the SXA 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.
SXA and the SXA Storefront together come with the following themes:
The Wireframe theme (SXA)
The Wireframe theme is typically the theme that you would 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.
The SXA Storefront does not support the Wireframe theme that comes with SXA. Therefore, when you create a new commerce storefront site, the Storefront Mock-up with product images theme is set as the default theme instead of Wireframe, which is normally assigned to new SXA sites. However, you can create a custom theme with your SXA Storefront site to use for wireframing.
The Storefront Mock-up themes (SXA Storefront)
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:
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 Branded theme (SXA Storefront)
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 looks like this on the live SXA Storefront template site:
Custom themes created with new commerce sites (SXA Storefront)
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 theme includes all the component Sass files; however, some of the files are empty. This makes it easier to export the theme using Creative Exchange.