Customizing rendering variants

Version: 10.0

Rendering variants give you the ability to use the same rendering in different ways. For each rendering variant, you can structure and style the HTML to display information in a particular way and you can expose different content for each variant. The following examples show how a rendering variant is used to change the position of an image from the left to the right, and to remove it all together.

Rendering variant - image position left
Rendering variant - image position right
Rendering variant - no image

All SXA and Commerce renderings use a standard Razor view and code behind approach. In addition, some renderings also use rendering variants implemented in one of the following ways.

Tip

You can find short videos on SXA rendering variants on YouTube and, on the Discover Sitecore channel, you can also find videos about Scriban templates.

Rendering variants - Scriban

Scriban templates give you more flexibility over the rendering markup and functionality than using standard SXA field renderers and make it easier to customize the rendering variant. Scriban templates are stored in SXA Storefront rendering variants and are available in the Content Editor (/sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants).

Rendering variants - Field renderers

Some renderings have commerce-specific rendering variants (for example, the Page Content rendering and Product Information rendering variant) that are based on field renderers, which include:

  • Variant field that reads the values from the Sitecore item using the same type as the Sitecore item itself.

  • Variant section, which is a wrapper that creates the HTML element.

  • Variant text field, which is used for text constants.

  • Variant date field, which enables you to define the date format.

  • Variant placeholder that creates a placeholder so that other components can be embedded in the rendering variant.

Do you have some feedback for us?

If you have suggestions for improving this article,