> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.customeow.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# What is the Component Conditional logic?

### 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
![](https://storage.crisp.chat/users/helpdesk/website/-/e/6/2/d/e62d468f88fe6000/20251124164830_1v13n8u.gif)
📌 **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

![](https://storage.crisp.chat/users/helpdesk/website/-/e/6/2/d/e62d468f88fe6000/image_zi0mng.png)
First, add all the components that might be shown throughout the customization process.

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

![](https://storage.crisp.chat/users/helpdesk/website/-/e/6/2/d/e62d468f88fe6000/image_s5mxq4.png)
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)

1. **Choose the Action**: Decide whether to **show** or **hide** the current component
![](https://storage.crisp.chat/users/helpdesk/website/-/e/6/2/d/e62d468f88fe6000/image_1uiiu7t.png)

2. **Select Logic Type**: Choose between **AND** / **OR** logic
![](https://storage.crisp.chat/users/helpdesk/website/-/e/6/2/d/e62d468f88fe6000/image_12exh8z.png)
* **AND**: All conditions must be met to trigger show/hide
* **OR**: Any one condition being met will trigger show/hide

3. **Configure Each Condition**
![](https://storage.crisp.chat/users/helpdesk/website/-/e/6/2/d/e62d468f88fe6000/image_1yr2vq6.png)

 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.

✅${color}[#ff0000]( Correct Approach: Enable “Output Value is different”)

![](https://storage.crisp.chat/users/helpdesk/website/-/e/6/2/d/e62d468f88fe6000/image_11azcpn.png)

To ensure the condition logic remains effective across different language environments, go to the option component settings:
1. Enable the switch:**Output Value is different** (e.g., display text: `Female`, output value: `female`)
2. 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.