# 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FjSPE0N6QPB22XNvAQiVD%2Fimage.png?alt=media&#x26;token=2ac4ef02-f727-4d06-8996-e1634ede24c4" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FI5q4lHbyOJ8RWmCaT2rv%2Fimage.png?alt=media&#x26;token=8bf58529-e3d9-4282-9478-9d3fb14e8148" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FyLgWxDeGFFeGq5YtsTG8%2Fimage.png?alt=media&#x26;token=4c2756e0-344a-4b22-8301-ea0b2e879182" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2F0BXOgDQ2czoZbWst9qyz%2Fimage.png?alt=media&#x26;token=4122107d-2900-4ffc-9348-ea97c3a442f2" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FC9cHKqaQ9vcXk63W20VR%2Fimage.png?alt=media&#x26;token=42ca23b1-9a77-4e3e-90a0-fc9430178bf9" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FbkuiDvdc4gLQpH1fllf3%2Fimage.png?alt=media&#x26;token=da6a9b57-e324-4927-8cdb-0bf23f0a57d2" 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@globosoftware.net>**.

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