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.

---

Basic Option Settings:

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 (620px): 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.

How to set up Conditional logic for your options

---

Advanced Option Settings

1. Pop-up Image

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. Image Size

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

3. Show Next To

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

4. 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.