Help

2 min read

Image/GIF Banners

Image banners will likely represent most of the content on your home screen. They're perfect for promotions, brand messaging, and driving users to specific areas of your app.

Video Tutorial

Step-by-Step Guide

Follow these steps to create an image or GIF banner:

1. Banner Title

Give the banner a descriptive title. This title serves multiple purposes:

  • Analytics identification - Track banner performance
  • Accessibility - Voice assistance technology for visually impaired users
  • Navigation - Used as screen title when linking to content like PLPs

2. Content Type

Set the Content type to Image/GIF from the dropdown menu.

3. Choose the Action

Control what happens when users tap the banner:

ActionDescription
NoneBanner does nothing when tapped
PageLink to a page created in the CMS
Product CategoryLink to a Product List Page via category picker
URLOpen webpage in webview or navigate via app deep link
ShopLink to the main shop screen
LookbookLink to a lookbook created in the CMS
Store FinderLink to the Store Finder feature

4. Upload Image

Either upload a new image file or select from previously uploaded images.

Image requirements:

  • Supports standard image formats (JPG, PNG)
  • Supports animated GIFs
  • Ensure images are optimized for mobile viewing

5. Select Layout

Choose your banner width:

Full Width

  • Spans the entire screen width
  • Best for hero promotions and major announcements

Half Width

  • Takes up 50% of screen width
  • Must be followed by another half-width banner to complete the row
  • Great for creating grid layouts (2×X format)

6. Set Padding (Optional)

Add spacing around your banner if needed. This is optional and depends on your design requirements.

7. Active/Inactive State

Control banner visibility:

Active Banners:

  • Will show according to their schedule
  • Visible when conditions are met

Inactive Banners:

  • Remain hidden regardless of scheduling
  • Useful for work-in-progress banners
  • Good for testing before going live

8. Schedule (Optional)

Set when the banner should appear:

Leave blank: Banner shows always until removed
Set dates/times: Banner only appears during specified periods

Scheduling tips:

  • Perfect for flash sales and limited-time offers
  • Use for seasonal campaigns
  • Coordinate with marketing calendar

9. Platform Selection

Choose which devices should display the banner:

  • ✅ iPhone - iOS mobile devices
  • ✅ iPad - iOS tablet devices
  • ✅ Android - Android mobile devices

You can select any combination of platforms based on your strategy.

Saving and Publishing

  1. Save your banner - Returns you to the banners overview
  2. Preview in the visual preview panel
  3. Test on device using the QR code feature
  4. Publish when satisfied with your changes

Best Practices

Image Optimization

  • Use high-quality images that look good on mobile
  • Consider different screen sizes across platforms
  • Keep file sizes reasonable for fast loading

Layout Strategy

  • Full-width banners for major promotions
  • Half-width banners for secondary content or grid layouts
  • Mix layouts for visual variety

Action Selection

  • Product Category - Best for driving sales
  • URL - Great for external campaigns or deep links
  • Page - Perfect for brand content and storytelling
  • None - Use for pure branding/awareness content

Scheduling Tips

  • Schedule promotional banners around marketing campaigns
  • Use inactive state during banner creation and testing
  • Preview future dates to verify scheduling works correctly

Common Use Cases

Promotional Campaigns

  • Sale announcements with Product Category links
  • Half-width layout for multiple simultaneous offers

Brand Content

  • Full-width hero images with Page links
  • GIF animations for engaging content

Seasonal Marketing

  • Scheduled banners for holidays and events
  • Platform-specific messaging when needed

What's Next?