> 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

## 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!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.globo.io/options/static-option-type/pop-up-modal-and-paragraph.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.