# Pop-up

The **Pop-up** option type allows you to display additional information in a pop-up window when users interact with a specific element on your product page. This feature is useful for providing extra details, instructions, or promotions without cluttering the main page.

👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/heading-paragraph) to see how it works 

***

## **Basic Option Settings:**

<figure><img src="/files/lP44vpkz4of4RAxWDqBc" alt=""><figcaption></figcaption></figure>

#### **1. Option Name**

The internal name used within your app to identify the Pop-up option. This helps with organizing and managing pop-ups during setup.

#### **2. Title on Product**

The text displayed on the product page that users can click or hover over to trigger the pop-up. This serves as a prompt or link to access the pop-up content.

#### **3. Title in Pop-up**

The heading or title is shown within the pop-up window. This helps users quickly understand the content or purpose of the pop-up.

#### **4. Size**

Determines the dimensions of the pop-up window. Options include:

* **Small** (380px): A compact pop-up for brief content.
* **Medium** (620p&#x78;**)**: A standard size suitable for most content.
* **Large** (980px): A larger pop-up for more detailed information.

#### **5. Content**

Defines what is displayed within the pop-up. You can include various elements such as text, tables, font styles, sizes, quotes, code, centered text, equations, links, images, colors, and more.

#### **6. Conditional Logic**

Allows the pop-up to be displayed or hidden based on customer selections or other conditions. This ensures the pop-up appears only when relevant to the customer's choices or context.

{% hint style="info" %}
[How to set up Conditional logic for your options](https://options-docs-v2.avisplus.io/app-features/conditional-logic-option-b-shows-if-option-a-is-selected)
{% endhint %}

***

## **Advanced Option Settings**

<figure><img src="/files/ICfgnd1QQng039biVwLL" alt=""><figcaption></figcaption></figure>

#### **1. Pop-up** Image&#x20;

Upload an image that will be displayed in front of the popup label. Useful for adding a visual cue or icon before the option.

#### 2. Display type

Choose how the popup appears on your product page - as a **Hyperlink** or a **Button**.

**Hyperlink:** Displays as a text link (e.g., *“View size guide”*).

**Button:** Displays as a clickable button (e.g., *“Customize Now”*).

#### **3.** Image Size

Select the display size of the popup image (e.g., small, medium, large) to fit your product layout.

#### **4.** Show Next To

Choose another option’s label to display this option beside it, helping to group related options together on the product page.

#### **5. Class Name**

Assigns a custom CSS class to the Pop-up option, enabling you to apply specific styling or behavior through CSS. This helps in maintaining a consistent design and functionality across your product pages.


---

# 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://options-docs-v2.avisplus.io/option-types/all-option-types/pop-up.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.