---
title: How to change your Consumer App layout in Controls?
description: Use this guide to change how your mobile app home page looks and how it appears in the app stores. You’ll manage this via the Designer area in Controls.
---

[Skip to content](https://support.slerp.com/knowledge/how-to-change-app-layout-in-controls#main-content)

English

Show submenu for translations

![slerp.com](https://support.slerp.com/hs-fs/hubfs/SLERP_Primary-Light_RGB-01-1.png?width=186&height=52&name=SLERP_Primary-Light_RGB-01-1.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- Go to www.slerp.com

 Go to www.slerp.com

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Help Centre](https://support.slerp.com/knowledge?hsLang=en)
2. [App Ordering](https://support.slerp.com/knowledge/app-ordering?hsLang=en)

# How to change your Consumer App layout in Controls?

## Use this guide to change how your mobile app home page looks and how it appears in the app stores. You’ll manage this via the Designer area in Controls.

📝 Note:

**Brand colours are now controlled from the Web tab.** Whatever colours you set for your website will automatically apply to your mobile app as well.

### 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.

![](https://support.slerp.com/hs-fs/hubfs/image-png-Nov-10-2023-08-57-59-9981-PM.png?width=232&height=204&name=image-png-Nov-10-2023-08-57-59-9981-PM.png)

**List View:**               **Grid View:**              **Block View:**      
![](https://support.slerp.com/hs-fs/hubfs/image-png-Dec-28-2023-09-21-29-3909-AM.png?width=169&height=335&name=image-png-Dec-28-2023-09-21-29-3909-AM.png)![](https://support.slerp.com/hs-fs/hubfs/image-png-Dec-28-2023-09-22-15-5287-AM.png?width=170&height=335&name=image-png-Dec-28-2023-09-22-15-5287-AM.png)![](https://support.slerp.com/hs-fs/hubfs/image-png-Dec-28-2023-09-26-30-3540-AM.png?width=170&height=335&name=image-png-Dec-28-2023-09-26-30-3540-AM.png)

#### **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.

### 🏆 Best Practices

- Keep section titles **short and clear** (e.g. “Order Online”, “View Locations”, “Join Loyalty”).
- Put your **most important actions at the top** (usually ordering or loyalty).
- Use the phone preview to check that text doesn’t get cut off and tiles look good on a small screen.
- When changing colours, always do it on the **Web tab**, then confirm the app preview still looks accessible (good contrast, readable text).

- [Controls Dashboard](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#main-content)

    - [Insights](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#insights)
    - [Orders Tab](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#orders-tab)
    - [Locations Tab](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#locations-tab)
    - [Products Tab](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#products-tab)
    - [Discounts / Customers Tab](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#discounts-customers-tab)
    - [Loyalty](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#loyalty)
    - [Designer Tab](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#designer-tab)
    - [Composer Tab](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#composer-tab)
    - [Dispatch Self-Serve](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#dispatch-self-serve)
    - [Settings Tab](https://support.slerp.com/knowledge/controls-dashboard?hsLang=en#settings-tab)
- [Web Ordering](https://support.slerp.com/knowledge/web-ordering?hsLang=en)
- [App Ordering](https://support.slerp.com/knowledge/app-ordering?hsLang=en)
- [Partner App & Device](https://support.slerp.com/knowledge/partner-app-device?hsLang=en#main-content)

    - [Slerp App](https://support.slerp.com/knowledge/partner-app-device?hsLang=en#slerp-app)
    - [Printer & Hardware Devices](https://support.slerp.com/knowledge/partner-app-device?hsLang=en#printer-hardware-devices)
- [Delivery](https://support.slerp.com/knowledge/delivery?hsLang=en#main-content)

    - [On Demand Last Mile Delivery](https://support.slerp.com/knowledge/delivery?hsLang=en#on-demand-last-mile-delivery)
    - [Local And Nationwide Delivery](https://support.slerp.com/knowledge/delivery?hsLang=en#local-and-nationwide-delivery)
- [Slerp Success & Marketing](https://support.slerp.com/knowledge/slerp-success-marketing?hsLang=en)
- [Finance Enquiries](https://support.slerp.com/knowledge/finance-enquiries?hsLang=en#main-content)

    - [Finance FAQ](https://support.slerp.com/knowledge/finance-enquiries?hsLang=en#finance-faq)
    - [Reporting](https://support.slerp.com/knowledge/finance-enquiries?hsLang=en#reporting)
    - [Invoice, Credit Notes and VAT Receipts](https://support.slerp.com/knowledge/finance-enquiries?hsLang=en#invoice-credit-notes-and-vat-receipts)
    - [Franchise Attribution](https://support.slerp.com/knowledge/finance-enquiries?hsLang=en#franchise-attribution)
- [Integrations](https://support.slerp.com/knowledge/integrations?hsLang=en#main-content)

    - [Slerp Menu & Order Manager](https://support.slerp.com/knowledge/integrations?hsLang=en#slerp-menu-order-manager)
    - [Deliverect](https://support.slerp.com/knowledge/integrations?hsLang=en#deliverect)
    - [Lightspeed](https://support.slerp.com/knowledge/integrations?hsLang=en#lightspeed)
    - [CRM](https://support.slerp.com/knowledge/integrations?hsLang=en#crm)
    - [3S POS](https://support.slerp.com/knowledge/integrations?hsLang=en#3s-pos)
    - [Urban Piper](https://support.slerp.com/knowledge/integrations?hsLang=en#urban-piper)
    - [Shipday](https://support.slerp.com/knowledge/integrations?hsLang=en#shipday)
    - [Custom Webhooks](https://support.slerp.com/knowledge/integrations?hsLang=en#custom-webhooks)
- [FAQs](https://support.slerp.com/knowledge/faqs?hsLang=en)
- [Support and Updates](https://support.slerp.com/knowledge/support-and-updates?hsLang=en)

[![slerp.com](https://support.slerp.com/hs-fs/hubfs/SLERP_Primary-Light_RGB-01-1.png?width=200&height=56&name=SLERP_Primary-Light_RGB-01-1.png "slerp.com")](http://www.slerp.com)

[Contact Us](https://www.slerp.com/contact-us/)

Copyright © 2025, Slerp