Elements of the Storefront site template

Current version: 10.1

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

*Wildcard pages

**Located in the /sitecore/templates/Project/<tenant> 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/<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

Do you have some feedback for us?

If you have suggestions for improving this article,