Elements of the Storefront site template

Abstract

Overview of the Content Editor items added with the SXA Storefront site template as well as the page designs and partial designs that are included with the template.

The SXA Storefront site template provides you with a preconfigured storefront that uses both native SXA and commerce-specific renderings.

When you use the default SXA Storefront site template, you see the following items in the Content Editor:

ElementsInContentEditorTenant.png

Tenant

ElementsInContentEditorSite.png

Site

ElementsInContentEditorHome.png

Site pages, for example, Home, Category, Product, as well as catalogs

ElementsInContentEditorEmails.png

Mail manager for EXM to manage email campaigns per site

ElementsInContentEditorMedia.png

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.

ElementsInContentEditorData.png

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.

ElementsInContentEditorDictionary.png

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.

ElementsInContentEditorPresentation.png

Page designs, partial designs, mappings, rendering variants with Scriban templates.

ElementsInContentEditorSettings.png

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.

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.

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.

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