Use Expression-Based Component Variations to create multiple versions of your component and assign visibility rules to target specific customer groups with each variation. Component Variations gives your site more flexibility and better opportunities to cater to individual customers and create the best experience possible.
Required Editions
| Available in: Salesforce Classic and Lightning Experience |
| Available in: Enterprise, Performance, Unlimited, and Developer Editions |
| Applies to: LWR sites |
| User Permissions Needed | |
|---|---|
| To create an Experience Cloud site: | Create and Set Up Experiences AND View Setup and Configuration |
| To customize or publish an Experience Cloud site: |
|
You can create variations for any component from the Component Variations icon.
- From Experience Builder, select a component that appears on the canvas or add a new one.
- Click the Component Variations icon at the top of the properties panel.
- Click +New Component Variation.
-
Enter a name and save your variation. Your new variation is now listed in the Draft
Variations section. It remains in draft state until you add a visibility rule.
You can change your component name later by selecting the settings dropdown and clicking Edit Name.
- To differentiate your variation from the default component, select your variation and update the options on the Settings and Style tabs. When you’re ready to make the variation visible, go to the Visibility tab.
- Click +Add Visibility Rule. Create a rule with one or several conditions. Show or hide your variation when the conditions are met.
- Save your visibility rule. Your variation is now available in a published state and appears to site visitors when the conditions are met.
- After you create multiple variations, prioritize them from the Variations dropdown by dragging them into the appropriate order.
Things to keep in mind:
- Each component can have up to 15 variations.
- Priority kicks in when a condition is true for more than one variation. If no conditions are true for any variation, the default component is shown.
- When a component has variations, the variations icon appears on the canvas next to the component name.
- The default component is the original version that your variations are based on. For the default component (Default) is listed next to the component name in the variations list and in the component title.