search
Developer DocsLoyalty ConsoleGet Support

palette2. App theming

The Loyalty Mobile App has a versatile theming system to ensure the app is 'on-brand' for your users.

hashtag
Customizing your app theme

During onboarding, your manager will set a theme that aligns with your brand guidelines. You’ll have the option to request adjustments within the theming system constraints listed below.

Theming options are configured during the app’s build phase and are “hard-coded”—meaning any changes you wish to make must be finalised before this stage. Post-launch theming updates are possible but require an app update and may incur additional costs.

Please consult with your onboarding manager to ensure your preferences are captured early in the process.

hashtag
App theme checklist

hashtag
Colour palette

We will theme the app to match the colour scheme of the brand guidelines you supply. The theming system is largely based around a primary colour and an accent colour.

When reviewing the mockups we supply, you can choose to change the primary or accent colour if you like.

hashtag
App icon

The app icon is used on a devices home screen. Two versions of your app icon must be supplied:

  • 1x PNG 1024x1024px (iOS)

  • 1x PNG 512x512px (Android)

You can let the system automatically scale down your two icons to produce all other sizes, or — if you want to customise the appearance of the icon at specific sizes — you can supply multiple versions. See this articlearrow-up-right for more information, under the header 'iOS App icon sizes'.

hashtag
Splash screen

Your app splash screen is shown whilst the app is loading and behind the login/register screen. It should be uncomplicated and fairly plain (many choose just a blank canvas of a single colour hex).

  • PNG 1290x2796px

It should not feature any text or logos. You can also optionally utilise your app splash screen in the following places:

  • Onboarding Slides

  • App Header Background

hashtag
Logos

The app displays a company logo throughout the app.

  • PNG Fixed Height 600px, Max Width 1000px

By default, the app logo you supply is used everywhere. If required, you can optionally supply an alternative image for the logo which appears in the app header.

hashtag
Fonts

You can specify a custom font to be used in the app headings. For each font weight, supply:

  • Licensed or royalty-free TTF or OTF file

hashtag
Onboarding slides

See First launch screen for more information.

You can show up to 5 onboarding slides to provide users with information about your loyalty program's features and benefits. When your slides come to an end, your logo is shown on your splash screen with a 'Get Started' button. You can choose which images and text are displayed.

See Onboarding slides for a preview.

Supply one of each per slide:

  • Background colour or background image

    • You can choose to have a static colour background per slide, OR

    • your splash screen image as the background for every slide

  • Text colour

  • Title text (always shown at the top)

  • Central image (always shown in the middle - must be a Transparent PNG Max ~150kb)

  • Description text (always shows at bottom)

triangle-exclamation

Do NOT design the entire slide as a graphic. You do not need to supply the entire slide as a graphic. You only need to provide the assets listed above. Each slide is generated by the app automatically from the supplied assets.

Additionally, the layout of the onboarding slides is fixed as shown. You cannot re-order the items on the slide or move them around.

hashtag
Empty wallet graphic

You can optionally choose to hide or show a different ‘empty wallet' graphic on the Wallet screen. This only applies if you are utilising the Wallet screen as opposed to the Activity screen (see App Configuration section above).

  • PNG Transparent

hashtag
Asset previews

Asset Standalone
Asset Preview In-situ

Previous1. App Store developer accountsNext3. App configuration

Last updated

Was this helpful?