Rendering Variants in Sitecore Experience Accelerator (SXA) provide a way to alter the presentation of a component without requiring multiple similar renderings or changing the component’s view (CSHTML file). They allow you to define different HTML structures for a component and then select the appropriate variant when adding the component to a page.
For example, consider a simple “Promo” component that has a title, description, and image. Using Rendering Variants, you could have the following options:
- Default Promo: Displays the title, description, and image in a standard layout.
- Promo with Large Image: Displays the image at twice the size.
- Promo without Image: Only displays the title and description, no image.
- Promo with Title Overlay: Displays the title overlaid on the image, with no description.
Each of these could be a separate Rendering Variant for the Promo component. You only need to develop one Promo component, and then you can create as many Rendering Variants as you like to control how it is displayed.
Rendering Variants are managed in the Content Editor under site/Presentation/Rendering Variants. For each Rendering Variant, you can create a hierarchy of Variant Fields to define the HTML structure. These Variant Fields can be mapped to fields on the component’s Datasource item, or they can output static HTML.
Rendering Variants are an extremely powerful feature in SXA that can greatly reduce the number of similar components you need to develop and provide content authors with a flexible way to control the presentation of content.
