How to change your Consumer App layout in Controls?

1. Open the Designer

1. Log in to Controls Dashboard as an admin.
2. In the left‑hand menu, click Designer.
3. At the top of the page you’ll see tabs such as:
   • Web
   • Mobile App
   • Content
   • Wallet Pass (if enabled)

This article focuses on the Mobile App tab.

2. Manage Your Mobile App Home Page Layout

2.1 Go to the Mobile App Content

1. Click the Mobile App tab.
2. Make sure the Content sub‑tab is selected (you’ll see Content and App Store).

You’ll see:

• A list of Home Page Sections on the left.
• A live phone preview on the right, showing how the app will look to customers.

2.2 Reorder Sections

The order of the tiles on your app home page follows the order in the Home Page Sections list.

To change the order:

1. Hover over a section (e.g. order online).
2. Click and hold the drag handle (small grid icon) on the left of the row.
3. Drag the section up or down to the new position.
4. Release to drop it.

The top item in the list appears first on the app homepage.

2.3 Edit an Existing Section

To change the text or where a tile links:

1. Click anywhere on a section row (e.g. view locations).
2. In the edit panel, update:
   • Title – what customers see on the tile (e.g. “View Locations”).
   • Link to – where the tile goes:
     • An internal Slerp page (e.g. Locations, Menu, Loyalty).
     • An external URL (e.g. your main website, catering page).
   • Any available description or extra options.
3. Click Save within the panel if shown.

Changes will appear in the phone preview on the right.

2.4 Add a New Section

To promote something new (e.g. catering, gift cards, events):

1. Under the list of sections, click Add Section.
2. Enter:
   • Title (e.g. “Events & Catering”).
   • Link to (internal page or external URL).
   • Any additional fields offered (description, image, etc.).
3. Click Save.
4. Drag the new section into the position you want, using the drag handle.

2.5 Choose Product Page Layout

Near the bottom of the Mobile App → Content screen you’ll see Product Page Layout.

1. Open the dropdown (e.g. List, Grid, etc.).
2. Choose how you want products to appear in the app.
3. Check the phone preview to confirm you’re happy with the look.

2.6 Save Your Layout

1. After making your changes, click the Save button at the bottom of the page.
2. On your real device:
   • Fully close the app.
   • Re‑open it to refresh the layout.

If you don’t see the changes, confirm you clicked Save and that you’re editing the correct brand/store.

3. Change App Colours (Now Managed on Web Tab)

Colours for your mobile app now come from your Web designer settings.

1. In Designer, click the Web tab.
2. Update your brand colours (buttons, backgrounds, accents) as required.
3. Click Save.

The same colour settings will:

• Apply to your website, and
• Automatically carry through to your mobile app.

4. Edit App Store Listing (Name, Subtitle, Descriptions)

To control how your app appears in the Apple App Store and Google Play Store:

1. In Designer → Mobile App, click the App Store sub‑tab.
2. You’ll see fields such as:
   • App Name – the name shown in the stores and on customers’ devices.
   • Subtitle – a short phrase describing the app (e.g. “Official Crosstown App”).
   • Additional descriptions and metadata (depending on your setup).

When you change these:

• Click Save.
• The preview on the right will update to show how it will look on iOS and Android.
• Store updates may take up to 4 weeks to appear live in the app stores.