Start of Main Content

After 15+ years of designing Sitecore sites, it feels like I’ve seen every manner of solution configuration and content editing paradigm. In that time, I have prioritized the author experience and sought to find ways to simplify information architecture, reduce the number of features, and create clean usable solutions. One of the most powerful ways to do that in SitecoreAI is to empower content authors to make reasonable layout, styling, and presentation decisions without touching code.

This is where two often-confused tools come into play: Rendering Variants and Rendering Parameters.

At first glance, they might seem like two paths to the same destination, customizing how components behave or appear, but they serve distinct purposes. Understanding when (and why) to use one over the other can help streamline development, reduce complexity, and give content teams more meaningful control.

Rendering Variants were first introduced with the SXA framework and define the structure and layout of a component’s output—the HTML markup, the order of fields, the CSS classes applied, and so on. Think of them as blueprints for how content is rendered on the page.

Any number of them can be created for a specific component and are selected by content authors in the Design tab on the right rail of Page Builder, allowing content authors to quickly toggle between versions of a component.

  • You have a single data model for your component but want multiple layouts/visual treatments.
  • You want to reduce the number of individual features necessary solution when the only meaningful difference is layout and presentation.
  • You are experimenting with A/B testing for layout performance.

For example, a “Promo” component could have 5 acceptable variants like this example below. Content authors can easily toggle between these states without needing to re-code or duplicate the component logic. Easy win.

  1. Image Behind (default)
  2. Image Left
  3. Image Middle
  4. Image Right
  5. Image Left Title Partial Overlay

Rendering variant examples

Different Rendering Variants

Editing a rendering variant

Rendering Variant Editing
In the design tab on the right, all variant choices are present in a droplist and content authors can see alternate presentations with seconds.

Unlock the Full Potential of SitecoreAI with Velir

Velir helps enterprise organizations make the most of SitecoreAI. From accelerating implementation to unlocking long-term flexibility, we’ll partner with you to build a future-proof digital ecosystem.

What are rendering parameters?

Rendering Parameters, on the other hand, influence behavior and logic more than structure. They’re great for toggling features or fine-tuning how a component behaves - like deciding how many items to show in a carousel or whether to hide a a date or a referenced page's subtitle on a component.

In our experience, these should be used sparingly since overuse can allow for too many permutations for developing and testing when what you really need is a finite number of variations. These settings may not be as obvious to content authors and can lead to confusion and slower adoption.

Similar to variants, content authors set parameters in the right rail of Page Builder but under Design → Advanced styling.

When to use them:

  • You want to show or hide a data source (like a taxonomy tag or a date).
  • You need to configure settings across all variants (e.g., display 3 vs. 5 items).
  • You want authors to be able to tweak behavior without needing code changes. 

Editing a rendering parameter

Render Parameter Editing
In this case the, the parameter for Dark Mode is ensuring that the pause button is visible over a dark video background.

Which should you use? (And can you use both?)

If your goal is layout-level flexibility, rendering variants are your best friend. They keep your designs consistent while offering visual diversity from the same base component.

If you’re more concerned with toggling functionality or logic, rendering parameters are the better fit. They're particularly useful for settings that apply across variants or don't require structural changes.

And yes, you can absolutely use both. Just be mindful that parameters apply to all variants of a component. So while it’s technically possible to use a parameter to change text alignment and a variant to control layout, you risk creating confusing overlaps. When in doubt, err on the side of clarity and let variants control layout and styling, and let parameters control behavior.

Comparison table

Feature Rendering Variant Rendering Parameter
Purpose Controls how content is rendered. Different presentations of the same component. Controls how the rendering behaves across all variants. Presentation options for a component.
Editable by Content authors in Page Builder right rail Content authors in Page Builder right rail
Used in SXA & View Renderings All types of renderings
Affects Presentation/markup Logic/styling/configuration
Examples Show image above vs. beside text Display 3 vs. 5 items, toggle a value off/on, etc.

Final thoughts

The beauty of Sitecore is that it puts so much power in the hands of content authors. As developers and architects, our job is to design systems that strike the right balance between flexibility and control. By using rendering variants and rendering parameters intentionally, and not interchangeably, we make it easier for teams to manage content, maintain consistency, and build beautiful, performant experiences.

Learn more about how we folded these philosophies into our latest SitecoreAI build accelerator and how we are using it to migrate sites to the cloud faster than ever before.

Published:

Latest Ideas

Take advantage of our expertise with your next project.