Elements of the Storefront site template
The SXA Storefront site template provides you with a preconfigured storefront that uses both native SXA and commerce-specific renderings.
SXA Storefront site template items in the Content Editor
When you use the default SXA Storefront site template, you see the following items in the Content Editor:
| |
| |
|
Site pages, for example, Home, Category, Product, as well as catalogs |
|
Mail manager for EXM to manage email campaigns per site |
|
Media items or references to media items. For example, if you are using the sample Habitat catalog and Storefront site template, all the images in the sample Habitat catalog are saved here along with the images used on the Home page, logos, and placeholder images. Images can be stored in this folder or in a Digital Asset Management system depending on the settings you define. |
|
Shared site data. In the Commerce shared data folder, the following items are available: Account, Cart, Catalog, Checkout, Product Lists, Relationships, Search Bar, and Top Bar Links. |
|
Display labels, which can be manipulated through a Scriban template using, for example, sc_translate. Includes the site name to distinguish it from the general dictionary. |
|
Page designs, partial designs, mappings, rendering variants with Scriban templates. |
|
Commerce-specific configuration details are located in the Commerce sub-folder and include Cart configuration, Catalog configuration, Control Panel configuration, and Product List Cache Configuration. |
The tenant templates used by each site within the same tenant are stored in the sitecore/Templates/Project/<tenant> folder.
Templates and page designs used for Storefront pages
Each page of the SXA Storefront site template has a page design associated with it by default. This is done through template-to-page mappings. Pages are saved in the folders within the sitecore/Content/<tenant>/<storefront>/Home folder in the Content Editor. The following table lists the Storefront pages used and the page design associated with each page. Each page type is based on a unique template. This gives you the most flexibility when customizing, for example, if you decide to add additional fields to the template for use on a page.
Storefront page |
Template** |
Page design |
---|---|---|
Home |
Home |
Default Commerce Page |
Account Management |
Account Management |
Default Commerce Page |
Address Book |
Address Book |
Default Commerce Page |
Change Password |
Change Password |
Default Commerce Page |
Edit Profile |
Edit Profile |
Default Commerce Page |
My Order |
My Order |
Default Commerce Page |
My Orders |
My Orders |
Default Commerce Page |
Buy Gift Card |
Buy Gift Card |
Catalog Navigation Page |
Category * |
Category |
Catalog Navigation Page |
Checkout |
Checkout |
Checkout Page |
Delivery |
Delivery |
Checkout Page |
Billing |
Billing |
Checkout Page |
Review |
Review |
Checkout Page |
Order Confirmation |
Order Confirmation |
Checkout Page |
Forgot Password |
Forgot Password |
Default Commerce Page |
Landing pages: Drone, Phone, Watch |
Page |
Default Commerce Page |
Login |
Login |
Default Commerce Page |
Product * |
Product |
Catalog Navigation Page |
Registration |
Registration |
Default Commerce Page |
Search |
Sitecore/Page |
Default Commerce Page |
Shop * |
Category |
Catalog Navigation Page |
Shopping Cart |
Shopping Cart |
Shopping Cart Page |
**Located in the /sitecore/templates/Project/<tenant> folder
Storefront pages are designed to use the Bootstrap 3 grid system. You create the Bootstrap grid system when you create the site.
Templates for additional storefront pages
In addition to the templates used to create the pages in the storefront, the Storefront site template includes templates that you can use to create additional pages:
These templates are saved in the /sitecore/templates/Project/<tenant> folder. You can add additional pages by right-clicking the Home folder and clicking Insert From Template.
Partial designs used in Storefront page designs
The following table lists the partial designs used on each page design (either directly or through inheritance):
Page design |
Partial designs |
---|---|
Catalog Navigation Page |
Commerce Metadata for Catalog Items Main Content Default Commerce Header Default Commerce Footer Multi-Rows Base Header Structure Metadata |
Checkout Page |
Metadata Commerce Metadata Checkout Page Header Main Content Default Commerce Footer |
Default Commerce Page |
Main Content Default Commerce Footer Default Commerce Header Multi-Rows Base Header Structure Commerce Metadata Metadata |
Shopping Cart Page |
Main Content Default Commerce Footer Checkout Page Header Shopping Cart Page Header Commerce Metadata Metadata |