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.


  • Web Banners → 1.6:1 to 1.8:1

  • Mobile Banners → 2:2

Last updated

Was this helpful?