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:

  <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