Modal

The Modal option lets you display additional content in a popup window, such as instructions, size charts, or personalization previews.

General Tab (Basic Settings)

This tab controls the main configuration of the Modal option, including the trigger text, popup title, and the content displayed inside the modal window.

Label

Defines the text displayed on the button or link that opens the modal popup. Choose a short and clear label so customers understand what content the popup will display.

Example:

• View Instructions
• Size Guide
• More Information

Popup Title

Defines the title shown at the top of the modal popup. This helps customers quickly understand the purpose of the popup content.

Example:

• Product Instructions
• Customization Guide
• Size Chart

Modal Content

Defines the content displayed inside the modal window. Use the editor toolbar to format the content. Available formatting options include:

• Font Size – adjust the size of the text
• Bold – emphasize important text
• Italic – style text for emphasis
• Underline – highlight specific words or phrases
• Text Color – change the color of the text
• Highlight Color – add background highlight to text
• Bullet List – create unordered lists
• Numbered List – create ordered lists
• Text Alignment – align text left, center, or right
• Insert Link – add clickable URLs
• Insert Image – display images using an image URL
• Insert Table – create structured table layouts
• Emoji Picker – insert emoji icons

This option is useful for displaying information such as:

• product instructions
• size charts
• customization guidelines
• delivery or return information
• additional product details

Style Tab (Layout & Appearance)

This tab controls how the modal trigger and popup appear on the product page, including help text placement, modal width, display type, layout width, and custom styling.

Help Text Position

Controls where the help text appears relative to the modal trigger.

• Below Label: Help text appears under the field label.
• Below Field: Help text appears below the button or link.
• Tooltip: Help text appears inside an information icon, saving space in the layout.

Show as

Controls how the modal trigger appears on the product page.

• Button: Displays a clickable button that opens the modal.
• Link: Displays a clickable text link that opens the modal.

Max Width

Defines the maximum width of the modal popup window.

Example:

• 400–500px – compact modal
• 600px – standard modal size
• 700px+ – larger modal for more content

Field Width

Controls how wide the modal trigger appears within the options layout.

• 33% – narrow column
• 50% – half width
• 66% – wide column
• 100% – full width

Class (Unique)

A unique CSS class assigned to the modal field (example: wo_modal_1).

Use this if you want to:

• apply custom CSS styling
• target the modal with custom scripts
• customize its appearance using theme code

Conditions Tab

Use this tab to control the visibility of the Modal option. You can show or hide it only when specific custom options or Shopify variants are selected. To learn how to configure conditional logic, follow this guide.

Get Support 👇

If you experience any issues while configuring the Modal option, reach out to the WowApps support team via the in-app chat or email support@wowapps.io. You can also reach the dedicated manager at nayeem@wowapps.io.