# 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