# Configuring Banner Images

The banner **images** are large, prominent visuals displayed on your website or app to attract attention.\
\
They are commonly used for:

* 🔹 **Marketing & Promotions** — showcase offers, discounts, or new launches
* 🔹 **Branding** — display your brand’s vibe with logos, slogans, or themed visuals
* 🔹 **Navigation** — guide users to specific sections via sliders or clickable banners

***

### Common Traits of Banner Images

* Wide and horizontal format
* Can include **text overlays** (e.g., *“50% OFF”*, *“Order Now”*)
* Used on **homepages, category headers, sliders, carousels, or in email campaigns**

***

### How to Configure Banner Images in Atlas

* **Upload Image**
  * Go to **Atlas → Meraki → Gallery**.
  * Click **Upload Image**.
* **Assign for Web or App**
  * After uploading, click **Settings** for the image.
  * In the **Image Type** dropdown:
    * Select **Web Banner** or **Mobile Web Banner** for website banners.
    * Select **App Banner** for app banners.
* **Location Group Assignment (Optional)**
  * In **Image Settings → Location Group**, select a location group to display banners only for those outlets.
  * If no location group is selected → the banner will appear for **all locations by default**.
* **Add a Clickable Link (Markup)**

  * In **Markup field**, you can add HTML to hyperlink the banner image to a specific URL.

  **Example:**

  ```html
  <div style="display:inline-block; width:100%; padding:19px 105px 58px;">
    <a href="YOUR-WEBSITE-URL" 
       style="left:1%; position:absolute; top:1%; width:1000px; height:200px; padding-right:10px; padding-left:10px;">
    </a>
  </div>
  ```

  📌 Note:

  * Works only for **Web**.
  * For **App banners**, hyperlink requests must be submitted to the UrbanPiper Support Team.
  * No need to **publish the menu/site** after adding/editing banners.
  * Allow **\~5 minutes** for updates to reflect.

***

### Recommended Aspect Ratios

* **Web Banners** → 1.6:1 to 1.8:1
* **Mobile Banners** → 2:2


---

# Agent Instructions: 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:

```
GET https://help.urbanpiper.com/direct-ordering/configuring-banner-images.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.