# 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://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://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://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/getting-started/other-popular-features/how-to-set-up-conditional-logics.md)
* 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://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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optis.me/product-options/18-option-types/markdown/popup-modal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.