Design your mobile app (Design Studio)

Who is this article for?

• Gegsy merchants who want to brand and lay out their customer mobile app.
• Owners and employees who have the Design Studio permission.

About Design Studio

Design Studio is where you brand your customer mobile app: its colors, logo, home-screen and product-screen layouts, button style, and bottom navigation. A live phone preview on the right updates as you edit, so you can see your changes before they ship. Design Studio is available on all plans.

Open Mobile App → Design Studio (https://app.gegsy.com/mobile-app/design). A list on the left groups what you can design:

• Screens — Home and Menu.
• Across the app — Colors & cards, Bottom navigation, and Buttons, which apply to every screen.

Pick an item to see its settings in the middle, with a phone preview on the right that follows along. Click Save changes when you're done; a save bar also appears at the bottom of the screen when you have unsaved edits and the inline button has scrolled out of view.

Before you begin

• You need the Design Studio permission. Account owners have it by default and can grant it to employees.
• Your menu Items and Categories drive the preview, so set those up first to see realistic content. The preview also reflects active welcome/promo banners from Marketing → Banners.

Home

Home controls how your home screen is structured and branded. Your app-wide colors live in Colors & cards.

Home screen layout

Under Home screen layout ("Choose how your home screen is structured"), click a layout. Each option shows a small sketch in your colors:

• Default — the standard home screen with a header bar, welcome card, banner, featured row, and a sample post.
• Java — a compact header with a greeting and an optional full-width header background image.
• Modern — a full-bleed welcome hero slide at the top. To use it, you need at least one active welcome banner. If none exists, the app falls back to the Default view. The in-app note reads: "To use the modern layout, ensure at least one active welcome banner exists in Banners with type welcome. Default view will display otherwise." Set this up in Marketing → Banners.

Promoted items layout

Under Promoted items layout ("Choose how promoted items appear on the home screen"), click a layout:

• Single carousel — one card at a time in a horizontally scrolling row.
• Two columns — two cards side by side, paginated.

Promoted items are the menu items you've marked as promoted in Menu → Items.

Brand logo

Under Brand logo ("Upload your logo"), drop or click to upload your logo. The uploader accepts JPG or PNG only (max 5MB) and opens a crop tool so you can frame it (square works best). Your app needs a logo to look right — if one isn't set, you'll see the warning "Your app requires a logo. Upload one as part of your setup." Use Remove to delete the current logo.

Welcome screen logo (optional)

Under Welcome screen logo (marked Optional), you can upload a different logo to use only on the welcome screen: "Use a different logo just on the welcome screen. If left blank, the brand logo above is used there too." Same format rules apply (JPG or PNG, max 5MB), and Remove clears it.

Header

The Header card sets the top of your home screen. What it covers depends on your layout: the bar on Default, the greeting block on Java, and on Modern the top of the screen when no welcome banner is showing (over a banner photo, the header is white).

• Header color — the header's background.
• Icons and text — "The menu icon, greeting and points in the header." If it's hard to read on the header color, a note shows the contrast and suggests a color that passes; click Use to apply it.
• Header style (Default layout only) — Solid or Overlayed, which adds a subtle texture.

On the Java layout, you can also upload a header image here (JPG or PNG, max 5MB); "This image fills the full header background." Use Remove image to clear it.

Your phone's status bar (clock and battery) automatically switches between dark and light to stay readable on your header.

Welcome banner (Modern layout)

On the Modern layout, choose how much to darken your welcome banner photo "so the white text on it stays easy to read": None, Light, Standard, or Dark.

Banners

The banner cards on your home screen use a light tint of your brand color, set automatically. On a dark card color they use a dark tint instead, so your text stays readable.

Menu

Menu controls how items appear on your app's menu, the screen customers see when they tap the order tab.

Under Menu layout ("How items appear in each category of your menu."), click a layout. Each option shows a small sketch of its shape:

• Large cards — "One big card per row with a large photo."
• List — "Compact rows with a small photo on the left."
• Two columns — "Two cards side by side."
• Circles — "Round photos in a row you swipe through, with See all."

Every category on your menu uses the layout you pick. If you've never picked one, your app uses Large cards.

The menu takes its colors from Colors & cards: your page color behind the menu, your card color and card style for every item, and your button colors for the selected category and for labels like Free and Featured. The preview shows your real categories and items, with your promoted items in a Featured row at the top.

Buttons

The Buttons tab styles your app buttons "to match your brand." Set:

• Background color — the button fill.
• Text color — the button label color.
• Style — Square or Rounded corners.

The button style applies everywhere the app renders a branded button. This tab shows a focused preview of just the styled button.

Colors & cards

Colors & cards holds the colors and card style every screen of your app uses. That includes the ordering screens: choosing pickup, curbside or delivery, picking a location, and picking a day and time. Selected options there, like a day, a time, or Catering and Group, use your button colors.

Colors

"The colors every screen of your app uses." Type a hex value or use the picker for each:

• Brand color — "Points, badges, carousel dots and selected options."
• Page background — "Behind your home screen, menu and ordering screens."
• Card background — "Cards, bars and menus." Borders and dividers adjust automatically to suit it.
• Heading text — "Titles, names and prices."
• Body text — "Descriptions and smaller text."

Divider lines between sections are set for you: each one is a slightly darker shade of the page or card it sits on, in the same hue as your page background.

If a color is hard to read against the card or page background, a note shows the contrast (for example "Hard to read: 2.1:1 contrast. Aim for at least 4.5:1.") with a nearby color that passes. Click Use to apply it. The note is only advice; you can still save.

Once you change a color, a Reset to default link appears under its name, with a dot showing the default. Click it to put that one color back without touching the others. The default is the color's value in the palette you started from, so if you built your palette from your brand color, a reset brings back that palette's color. Under Start from a palette, a note tells you which palette that is. This works for every color in Design Studio, including the header and bottom navigation colors. A few colors that palettes don't set, like a custom bottom-bar border, go back to the app's automatic color.

If you've never set your colors, your app uses black for your brand color and buttons, dark gray headings, gray body text, white cards, and a warm off-white page.

Card style

"How cards look on every screen."

• Corners — Square, Rounded, or Extra round.
• Edges — Shadow, Outline (a thin border instead of a shadow), or Flat.

Each option shows a small card in your colors so you can compare.

Bottom navigation

Bottom navigation is "The tab bar at the bottom of every screen in your app." Its settings are grouped into six cards.

Style

"Bar is the classic full-width bar. Glass floats a frosted pill over your screens on iPhone, like Apple’s newest apps; Android phones keep the bar."

• Bar — the standard bar across the bottom of the screen. This is the default.
• Glass (iPhone) — a rounded, frosted bar that floats just above the bottom of the screen, with your screens scrolling underneath it. It uses your bar color, so your colors and contrast checks still apply. Android phones always show the standard bar.

Tabs

Choose which tabs appear and in what order. Drag a tab by its handle to move it, or focus the handle and use your arrow keys. Use the switch on each row to turn a tab on or off.

• Home, Order, and Account are always shown.
• Wallet, Loyalty, and Gift Cards are optional. Loyalty "Shows once your loyalty program is active" (set it up in Marketing → Loyalty). Gift Cards "Shows once gift cards are turned on" in Marketing → Gift Cards, and it replaces Buy Gift Card in the app's Account menu.
• Up to 6 tabs can show. A count under the list shows how many are on.

When you turn off Wallet, Loyalty, or Gift Cards, customers still reach it from the Account menu in your app, and any link or button that points to that tab opens it there instead.

Tab labels shrink slightly to fit, and on phones too narrow for them the bar shows icons only, so nothing gets cut off.

Colors

"Pick the bar color and the colors of its tabs."

• Bar color — the bar's background.
• Selected tab — "Icon and label of the tab the customer is on."
• Other tabs — "Icons and labels of the other tabs."

Type a hex value (for example #1A73E8) or use the color picker. If a tab color is hard to see against the bar, a note shows the contrast (for example "Hard to read: 2.1:1 contrast. Aim for at least 4.5:1.") with a nearby color that passes — click Use to apply it. The note is only advice; you can still save.

If you've never set these colors, the selected tab uses your Primary color and the other tabs use your Text color.

Top edge

"What separates your screens from the bar." Choose:

• Automatic — a thin line in a shade that suits your bar color.
• Custom — a thin line in a Border color you pick.
• None — no line.
• Shadow — a soft shadow instead of a line.

Tab labels

"Choose when the text under each icon shows."

• Always — every tab shows its label.
• Selected tab only — only the tab the customer is on shows its label.
• Icons only — no labels.

Selected tab

"How the tab the customer is on stands out from the others."

• Highlight — Color only, or Pill, which adds a soft pill behind the selected icon in your selected tab color.
• Icon style — Outline or Filled for the selected tab's icon. A custom loyalty icon you've uploaded always shows as uploaded.
• Label style — Regular or Bold for the selected tab's label.

Each option shows a small preview of the bar so you can compare before you choose.

Preview and save

A phone preview sits beside the controls and follows what you're editing. Every section shows the full phone; Buttons shows the home screen so you see your button style on its real buttons. The preview uses your real promoted items, categories, active banners, posts, and loyalty icon, and shows the Let's get started bar your customers see at the bottom of the home screen.

Tap any tab in the preview's bottom bar to see that screen with your colors: Home, Order (your menu), Wallet, Loyalty, Gift card, and Account. The preview shows the same tabs, in the same order, that your customers will see. Opening Home, Products, or Buttons switches the preview to the screen that section changes. On the Order screen, the category buttons follow along as you scroll the menu (tap one to jump to it), and tapping an item opens its item screen with your real options. On Account, tapping a row opens that page, such as My orders or My Settings, and tapping a sample order in My orders opens it the way your customers see it (tap Show Details for the receipt). Use the back arrow or the X to return. The Wallet, Loyalty, and Account screens show a sample customer; Loyalty uses your real reward tiers, and Gift card uses your real card designs and amounts. If you use the Glass bottom bar style, the preview shows it floating over each screen, the way it looks on iPhone.

When you're finished, click Save changes. Logo and image uploads are saved automatically as soon as they finish, but color, layout, and style edits are only stored when you save. While you have unsaved changes, a save bar appears at the bottom of the screen so you can save (or jump back to the inline button) without scrolling.