The basics of SXA Storefront

Elements of the Storefront site template

Version:

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:

	Tenant
	Site
	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.

Note

The tenant templates used by each site within the same tenant are stored in the sitecore/Templates/Project/ 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///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

*Wildcard pages

**Located in the /sitecore/templates/Project/ folder

Warning

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/ 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

If you have suggestions for improving this article, let us know!