Articles on: Tutorials

What is the Component Conditional logic?

This feature allows merchants to control whether a specific component is displayed on the user interface by configuring conditional logic, enabling dynamic content rendering.

It is designed to support:

Displaying different content components based on the user’s customization selections
Hiding irrelevant components triggered by user behavior to reduce page distractions
Enhancing user experience with flexible customization logic and multi-branch workflow support

📌 Example Use Case: Multi-role Customization Workflow (Role-based Branch Switching)

Users must select a role: Female / Boy / Girl. Depending on the selection, different customization options are dynamically displayed:

Selecting Female → Only show components for “Female Skin Tone, Female Hairstyle, Female clothes”
Selecting Boy → Only show components for “Boy Skin Tone, Boy Hairstyle, Boy clothes”
Selecting Girl → Only show components for “Girl Skin Tone, Girl Hairstyle, Girl clothes”

How to Configure Component Conditional logic?

Step 1: Prepare All Customization Components

First, add all the components that might be shown throughout the customization process.

Step 2: Enable “Show/Hide Rule” for Target Component

For each component that needs to be dynamically displayed or hidden, enable the Component Show/Hide Rule in its settings.

Step 3: Set Conditional Logic Rules (Core Configuration)

Choose the Action: Decide whether to show or hide the current component

Select Logic Type: Choose between AND / OR logic

AND: All conditions must be met to trigger show/hide
OR: Any one condition being met will trigger show/hide

Configure Each Condition

a. Select a source component

b. Choose the relevant output field of that component

c. Define a logic expression:

is equal to: Display/hide if the value equals the specified value

is not equal to: Display/hide if the value does not equal the specified value

starts with: Display/hide if the value starts with the specified text

ends with: Display/hide if the value ends with the specified text

contains: Display/hide if the value contains the specified text

does not contain: Display/hide if the value does not contain the specified text

is empty: Display/hide if the value is empty

is not empty: Display/hide if the value is not empty (has value)

d. Enter the expected value to match

Component Matching Value & Language Translation

In stores with different languages, the “display text” of an option may change due to translation.

For example:
In the English store: Female
In the French store: Femme

IIf you configure the component display rule by directly using the display text as the matching condition (e.g., show a component when the option value is Female), it will fail to match when the store language is switched to French, since the display text becomes Femme. This causes the conditional logic to break.

✅ Correct Approach: Enable “Output Value is different”

To ensure the condition logic remains effective across different language environments, go to the option component settings:

Enable the switch:Output Value is different (e.g., display text: Female, output value: female)
In the display/hide rules, use the output value for matching

This way, even if the display value changes due to translation, the output value remains consistent, ensuring the condition logic always works as expected.

Updated on: 24/11/2025

Was this article helpful?

Thank you!