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). The screen is organized into four tabs — Home, Products, Buttons, and Bottom Navigation — with a shared phone preview that swaps to match the tab you're on. 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

The Home tab controls how your home screen is structured and branded.

Home screen layout

Under Home screen layout ("Choose how your home screen is structured"), pick a Layout:

• 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"), choose 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.

Colors

Under Colors ("Match your app colors to your brand"), set your brand palette with the color pickers:

• Primary
• Secondary
• Text
• Background

When the home layout is Default or Java, two more pickers appear — Header Background * and Header Icons * — and on the Default layout you also get a Header background effect * dropdown with Solid and Overlayed options. The asterisked controls carry the helper note "* Applies to welcome screen only."

Java header background image

When the home layout is Java, a Java header background image (optional) uploader appears. Upload a JPG or PNG (max 5MB); "This image fills the full header background." Use Remove image to clear it.

Products

The Products tab controls your products-screen layout ("Select a layout for the products screen"). Pick one of four:

• Single Row — "Show one item in a single row."
• List View — "Show items as a list."
• Two Column — "Show two items per row, side-by-side."
• Circle — "Show items as circular images in a horizontal carousel."

Click a layout card to select it; the highlighted card is the active layout, and the preview updates to match.

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.

Bottom Navigation

The Bottom Navigation tab customizes the bottom nav bar colors. Set:

• Background color — the bar's background.
• Selected item — the color of the active tab's icon and label.
• Unselected item — the color of the other tabs.

This tab shows a focused preview of just the bottom nav strip. If you leave a color blank, Gegsy fills in a sensible default — the selected color falls back to your Primary color and the unselected color to your Text color.

Preview and save

A phone preview sits beside the controls and follows the active tab: the Home and Products tabs show the full phone frame, while Buttons and Bottom Navigation show a focused preview of just the section you're editing. The preview uses your real items, categories, and active banners.

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.