Build a storefront with Commerce renderings for SXA

Abstract

The SXA Storefront extends the fuctionality of SXA to accelerate the development of e-commerce storefronts.

The Commerce renderings for Sitecore Experience Accelerator (SXA) are commerce-specific renderings that are added to the SXA toolbox when you create a commerce tenant and site. The Commerce renderings can be used by web development teams to speed up the production of e-commerce storefronts. SXA, which separates structure from design, allows front-end developers, creative designers, content authors and developers to work in parallel.

Note

For best results, familiarize yourself with the functionality of SXA before you begin working with the Commerce renderings.

The Commerce renderings for SXA are specifically tailored for e-commerce and target Sitecore Commerce Engine. You can use the Commerce renderings to build a storefront based on the prebuilt SXA Storefront or to build a storefront from the bottom up. Building on top of the SXA Storefront gives you a head start, and then you customize the SXA Storefront to make it your own.

If you choose to build your storefront from scratch, you can build your own page designs using the Commerce renderings in the SXA toolbox.

Note

The Commerce renderings are dependent on the Commerce Antiforgery meta rendering. You must include the Antiforgery meta rendering on all storefront pages to ensure that the Commerce renderings behave as expected.

In the SXA Storefront template, the Antiforgery meta rendering is included in the <body> of the Commerce Metadata partial design so that it generates the antiforgery token HTML that is required by the site.

To add a Commerce rendering to a page:

  1. In the Experience Editor, open an existing page or partial design, or create a new page or partial design on which you want to include the rendering.

  2. In the Toolbox, select the relevant rendering from one of the Commerce categories:

    F5F94A908DDA4E6DAE9B8741FB7E877E.png
  3. Click and drag the rendering to add it to the page.

  4. If relevant, select or create associated content for the rendering.

    Note

    If you are building your site based on the SXA Storefront, content items that you can associate with the renderings have already been created in: sitecore/Content/Sitecore/<Your Storefront>/Data/Commerce/Toolbox category/Rendering name, for example, sitecore/Content/Sitecore/Storefront/Data/Commerce/Account/Registration

    The selected rendering appears on the page. Some renderings can contain placeholder images and data. For example, a product page looks like this in the Experience Editor, with a Storefront Mock-up theme applied:

    E321AC387EA64FC786C872F6F205983E.png

    Note

    The appearance of the renderings will depend on the theme that is applied to the site.

  5. You can edit field labels, button labels, and placeholder text in the rendering:

    • You can edit some content directly on the page in the Experience Editor.

    • You can edit other content only in the Content Editor. To open the associated content item in the Content Editor, select the rendering and click 636B9623277E4D5089A1B25D732A001F.png, then click Edit the related item.

    Note

    In addition to the text strings that are visible in the rendering in the Experience Editor, there can be validation messages that are only displayed on the live site. The validation messages can be edited on the associated content item in the Content Editor.

Other configuration options are described individually for each rendering, in the following topics:

Note

In SXA Storefront 1.0, components that contain forms for data input are implemented using standard .NET MVC and AJAX form techniques. Therefore, on predefined forms you can only customize the labels on input fields and buttons. A future version of SXA Storefront will contain forms implemented with the Sitecore Forms module that is included with Sitecore Experience Platform 9.