# 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FpMY4KNTZMxzCEWzuhsbY%2Fimage.png?alt=media&#x26;token=3289314c-7469-4f45-98c4-9a24efc01ba3" 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="https://3264408981-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ClFZbSMFYUfUOKXAOru%2Fuploads%2FUolargXzut4kHxc1osJL%2Fimage.png?alt=media&#x26;token=91fa2300-f389-4823-b318-bcf4a909dc3d" 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.