> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/markdown/popup-modal.md).

# Popup (Modal)

{% hint style="info" %}
**Plan:** **Pop-up modal** is available on the **Platinum** plan and above. On the Free plan you can still try it on one live product with a Premium option set. See [Plans and feature availability](/product-options/getting-started/plans-and-features.md).
{% endhint %}

### **1. How Does the Popup Modal Display?**

The Popup Modal option displays as a clickable text or button on the product page. When customers click it, a popup window appears with detailed information - like size charts, personalization guides, care instructions, or policies - without cluttering the main product page.

This feature is purely informational and doesn't collect input from the customer.

**Example on product page**: “View Size Guide” → A popup opens showing a size chart.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FM7PgZAAzHwmenQoTLVww%2Fchrome-capture-2026-08-07%20(1).gif?alt=media&amp;token=3095b08d-2aea-47c3-af92-e25437982902" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdL7Ygfeh0-AeLNU4krqGPCOW1CnyETHtC0ffxpcou8Wny7_I9OeEDvnjXs0l0tlJp0pVaKFde_nvXXPl662ol2Cc5dDhPEczFSxPzaUz47NAHQZtIOfG7wHSgqjKXiVv1LqkKUSA?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

### **2. How to Create a Popup Modal**

**Step 1: Add a New Option**

* Open **1. Add options**, click **Add option**, tick **Pop-up modal** under **Static text** on the **New options** tab, then click **Add options**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FwlOfxLwa1ReRjY7AOKex%2Fpopup.png?alt=media&amp;token=ddb8adf6-e783-4659-8850-f435f0fec95b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcnlRzlzVhLJxlDXI3o1YKSKGxLiVYSAJ3CYjsn0GWhmeTP4kjMqSuVnxWldSQ9QdHHkQoHdEPdGBiukI1bHLvYskomkzCKd9CmqvC7WLu6IcNTiGDef4YQfNbyJyttOvPVI-CJUQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 2: Add Information to the Modal**

* **Label on product**: This is the clickable text that opens the popup (e.g., “View Care Instructions” or “See Personalization Guide”).
* **Title on pop-up**: This appears at the top of the popup window.
* **Content**: Add your detailed content inside the editor. This can include text, images, tables, or even bullet points. See [How to upload image in paragraph / pop-up modal?](/product-options/advanced-setup/how-to-upload-image-in-paragraph-pop-up-modal.md).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FkYrpEg5gNklXM1Hsc3A6%2Fpopupedit.png?alt=media&amp;token=6506c59c-28d3-46d3-9198-2905c7635679" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdYICJbHVB-kAx_kUJOw3rcVYb_qGLSs-0CeGaUO2XanVAI0JRiJRCKl_w9LLxudKYnVtLN9rTtcjd7QxosvStx82fn987Dp10_A_WJlFYb8iJ8xy9ur5dYLe_1cgTEjt3_8QJEGg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 3: Advanced Settings (If Needed)**

* **Visibility:** Enable visibility (conditional logic) if you want the Pop-up modal to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/advanced-setup/other-popular-features/how-to-set-up-conditional-logics.md)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FCRan0ZKErAWcRrpFZnqo%2Fpopupcl.png?alt=media&amp;token=35512322-4fdc-4c2a-b109-02614380009c" alt=""><figcaption></figcaption></figure>

* **Help text**: Add a short description to explain the purpose of the Pop-up modal. It can be displayed as a **Tooltip**, **Below the option title**, **Beside the option title** or **Below the option**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FCWjdXn2CgFCBmkCzPZKi%2Fpopuphelptext.png?alt=media&amp;token=08d7946b-5c9a-49ef-b8b9-62b34c25e30e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXezIQzaetUoUbO9qGPHa7Ivb0o3eDoppLTKgmBnqBLnAipL6ZA0AAXPho5JGWdfyLYl-XucR4jyLqDjT8vUshDGytKMc_DtcVDZpSZsPNg-PCpODb2a625qrwyT4WNC8kJVFujSzw?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

### **3. Real-World Applications of Popup Modal**

* Size charts
* Frame or color guides
* Personalization instructions
* Shipping & return policies
* Product care tips
* Warranty or disclaimer info

### **4. Key Features of Popup Modal**

* Keeps product pages clean and focused
* Allows rich content (images, tables, styled text)
* Fully supports conditional visibility
* Great for extra info that doesn’t need to be always visible
* Improves UX by giving info only when the customer wants it