Build a storefront with Commerce renderings

Version: 10.3

The Commerce renderings for Sitecore Experience Accelerator (SXA) are commerce-specific renderings that are added to the 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 Toolbox.

Important

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, click the arrow to expand a category.

    Toolbox
  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:

    Product Page shown in the Experience Editor
    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 , 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, 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.

Do you have some feedback for us?

If you have suggestions for improving this article,