> ## 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). # Use Component Conditions to Control Whether Components Are Shown or Hidden ## Principle This feature uses one component’s value to control whether other components are shown or hidden. When a controlled component is hidden, it produces no output. Conditional logic is not a component itself; it is a component setting that can be found by scrolling down on the component configuration page. In the following example, a menu selector is the **controlling component**, while image-upload and text components are **controlled components**. **Goal:** Let users choose either photo upload or text engraving from the menu. ## Walkthrough ### 1. Add controlling and controlled components Add a **controlling component** (menu selector) and **controlled components** (image-upload and engraving components). ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/cc7ca411-4b1a-496e-8d7c-a6572f22fd85.png?x-oss-process=image/format%2Cwebp) ### 2. Add menu option values Add the values **Custom Photo** and **Custom Text** to the menu selector. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/4b187ee0-8d81-40de-9532-a6d48521ece2.png?x-oss-process=image/format%2Cwebp) ### 3. Add conditional logic to the engraving component Add conditional logic to the engraving component: ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/6ff9f52c-8818-4a49-85c6-e9ae1020a992.png?x-oss-process=image/format%2Cwebp) ### 4. Add a condition Add a condition. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/d45e1f36-f1cd-4767-8037-36fb180b5401.png?x-oss-process=image/format%2Cwebp) ### 5. Select the condition source Choose the menu selector as the condition source. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/db05ee3f-158e-46a0-a0c1-cf2f62fd985c.png?x-oss-process=image/format%2Cwebp) ### 6. Select the value type Choose its value type. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/a963054a-4536-4afa-8af2-aa67d21e3ca3.png?x-oss-process=image/format%2Cwebp) ### 7. Select the comparison operator Select the comparison operator. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/b3b62f62-fdee-42a5-b1e5-29f8b04d87b1.png?x-oss-process=image/format%2Cwebp) ### 8. Enter the comparison value Enter the menu selector’s value to compare against. Since the engraving component should appear when a user selects **Custom Text**, enter **Custom Text** here. > **Note:** This value must exactly match the value entered in the menu selector, including capitalization. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ead44d05-8234-4cf1-b496-8699680c5c21.png?x-oss-process=image/format%2Cwebp) ### 9. Save the condition After entering the value, click **Done**. The engraving component is now configured with a condition. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/935a72aa-6966-4c6e-a3f3-164b68468d24.png?x-oss-process=image/format%2Cwebp) ### 10. Configure the image-upload component Configure the image-upload component the same way. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/010c63b6-2df3-49e5-95fb-64eb25f5d736.png?x-oss-process=image/format%2Cwebp) ### 11. Preview the result Click **Preview** to check the result. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/a57f0800-feb0-4e42-81cc-a06e6bed3fef.gif?x-oss-process=image/format%2Cwebp) ## Advanced use ### Choose the number of uploaded images ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/6bb3443f-4d9b-4b3c-b3fb-5e97e125ad8f.gif?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/86ce506a-6e25-4a0c-a6c1-abb790ecae46.png?x-oss-process=image/format%2Cwebp) ### Choose the number of engravings ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ce4e99d3-d48b-44dc-9b6e-ed1a5b9a8fe6.gif?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/d7e6a4ea-9381-4aa3-8cb7-7f57d6aed11e.png?x-oss-process=image/format%2Cwebp) #### How the conditions work Using **Name 3** as an example: when a customer chooses three or four names, Name 3 must be shown. Add two conditions (menu selector = 3 and menu selector = 4), joined by **or**, not **and**. - **Name 1** needs no condition because it is always shown, regardless of the customer’s selection. - **Name 2** needs three conditions (menu selector = 2, 3, or 4). - **Name 4** needs one condition (menu selector = 4). ## Further Reading ### Getting Started - [Connect Your Store](https://help.customeow.io/en/article/connect-your-store-9kzhxj/) - [Beginner Guide: Create Your First Customization Feature Step by Step](https://help.customeow.io/en/article/beginner-guide-create-your-first-customization-feature-step-by-step-3th848/) - [How to Integrate a Customization Feature into a Product Landing Page (Product Detail Page)](https://help.customeow.io/en/article/how-to-integrate-a-customization-feature-into-a-product-landing-page-product-detail-page-9b1ke5/) ### Advanced Features - [Templates in CustoMeow](https://help.customeow.io/en/article/templates-in-customeow-d69xbk/) - [What Can Workflow Do?](https://help.customeow.io/en/article/what-can-workflow-do-3jwgks/) ### Add-on Pricing and Upselling - [What Is an Add-on Price Product?](https://help.customeow.io/en/article/what-is-an-add-on-price-product-959ka/) - [What Is an Upsell Product?](https://help.customeow.io/en/article/what-is-an-upsell-product-9pmt71/) - [Cart Binding for Add-Price and Upsell Products](https://help.customeow.io/en/article/cart-binding-for-add-price-and-upsell-products-bi7wjx/)