> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/static-option-type/pop-up-modal-and-paragraph.md).

# Pop Up Modal And Paragraph

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

## How to add Image to Pop-up Modal and Paragraph

#### Steps to Manage:

1. **Go to Shopify Dashboard**\
   Navigate to: `Content → Files → Upload files`
2. **Upload Your Image**\
   Upload the image file you want to display in your popup or paragraph.
3. **Copy the Image URL**\
   After uploading, copy the image URL provided by Shopify.

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

4. **Preview the Image**

* Open a new browser tab
* Paste the copied URL
* Right-click on the image
* Select **“Copy image”** (or copy image address)

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

5. **Go to Globo Product Options App**

* Open the **Popup Modal** or **Paragraph** element
* Paste the image tag or URL inside the **content field**

<figure><img src="/files/445xDv61C0GH4wuJwUCH" alt=""><figcaption></figcaption></figure>

## Difference in Pop-up modal & Paragraph

These two elements offer different ways to present additional information on your product pages — mainly in **how the content is displayed**.

#### 🔳 **Popup Modal**

* Displays content **only when a button is clicked**
* Best used when you want to **keep the page clean** and **reduce visual clutter**
* Ideal for **images**, size guides, or extra instructions
* Image/content is hidden until the customer **clicks a button to open a popup**
* Content support: **Images only** (mainly used for visuals)

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

#### 📄 Paragraph Element

The **Paragraph** element is designed to display rich content — **text and/or images** — directly on the product page **without any need to click a button**.

* **🖼 Direct Image Display**\
  Any image added will appear immediately on the page, no pop-up or interaction needed.

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

* **💬 Customizable Text Content**\
  You can add and format text just like using a word processor. This includes:
  * **Headings** (H1, H2, H3…)
  * **Fonts**: Choose different font families and sizes
  * **Line type**: Adjust line breaks or dividers
  * **Line spacing**: Control how compact or spaced the text appears
  * **Tabs & alignment**: Align content and organize with indentations
  * **Colors & styling**: Bold, italic, underline, font color, and background color

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

📧 **Need Help?**\
If you run into any issues while setting up your option set, feel free to reach out to us at **Chat** or email [**contact@globo.io**](mailto:contact@globo.io)**.**

We’re always here and happy to help — with sincerity and care!