> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/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).

# Popup (Modal)

1. [OPTIS Product Options, Variant](/product-options)
2. [20 Option Types](/product-options/20-option-types)
3. [Static text](/product-options/20-option-types/markdown)

# Popup (Modal)

A **Pop-up modal** is a clickable text that opens a popup with more information - a size chart, care instructions, or a policy - without cluttering the product page. It doesn't collect anything from the customer.

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

Example: "View Size Guide" opens a popup showing a size chart.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/1/a/1/61a132c767986800/53a3d3c7-d954-4d08-a050-1d0aa9_13albzm.gif)

## When to use a Pop-up modal

* Size, frame or color guides.
* Personalization instructions or product care tips.
* Shipping and return policies, warranty or disclaimer info.

## How to add a Pop-up modal option
### Step 1: Add the option

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

![](https://storage.crisp.chat/users/helpdesk/website/-/2/f/4/0/2f406e0b8b6c4200/0e0a871f-7097-4bbb-94ac-bd07b2_1fv9wz9.png)

### Step 2: Write the content

* **Label on product** - the clickable text that opens the popup (e.g., "View Care Instructions").
* **Title on pop-up** - shown at the top of the popup window.
* **Content** - your detailed content, including text, images, tables or bullet points. See [How to upload image in paragraph / pop-up modal?](/product-options/faq/how-to-upload-image-in-paragraph-pop-up-modal).

![](https://storage.crisp.chat/users/helpdesk/website/-/2/a/0/f/2a0f1c5d79966000/bd4b25e2-e902-4bda-8c5f-25754a_kn441v.png)

### Step 3: Save and test

Click **Save**, then open the product page on your store to check that the Pop-up modal works correctly.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/a/e/55ae4437f38bc400/8e946766-db84-4b31-bbe7-c4b6c4_qy3yzt.png)

## Option settings
### Help text

Add a short note explaining what the popup is for. Choose how it's shown: **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/5/5/7/b5575d5c2046f800/61b66a91-36ec-4d59-92b3-ef66a0_1mdoeoh.png)

### Show or hide with Visibility (conditional logic)

Show or hide the Pop-up modal based on another option. Available on the **Advanced** plan and above. Note that a Pop-up modal can be shown or hidden by other options, but it cannot be used to trigger another option's visibility. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics).

![](https://storage.crisp.chat/users/helpdesk/website/-/d/b/d/3/dbd30ed6e7964800/5873f3e1-919d-41fe-8d10-6ac332_urx3np.png)

### Option width

In the **Display** tab, set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the clickable Pop-up modal text takes.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/2/9/3/a293b1986859b800/ea5b3969-dbec-42ae-913a-ce3c83_1i0s3uk.png)

## Related guides

* [Paragraph](/product-options/20-option-types/markdown/paragraph)
* [How to upload image in paragraph / pop-up modal?](/product-options/faq/how-to-upload-image-in-paragraph-pop-up-modal)
* [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)