> 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)

### **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**

* Click Add Option > Popup Modal to begin creating your popup.

<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**

* Title on product page: This is the clickable text or button that opens the popup (e.g., “View Care Instructions” or “See Personalization Guide”).
* Label on Pop-up: This appears at the top of the popup window.
* Popup Content: Add your detailed content inside the editor. This can include text, images, tables, or even bullet points.

<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)**

* Conditional Logic: Enable conditional logic if you want the Switch 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 moda. It can be displayed as Tooltips or Content (Below/Beside the option title, 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