Design your app: templates, brand, screens and navigation

The designer is the page you land on when you open an app. The rail on the left lists its areas; the phone in the middle shows your draft; the panel on the right edits what you selected.

Templates

Under Screens, open the template gallery to switch the whole app's look. Templates are complete apps, each previewed on a store from its own industry (fashion, beauty, grocery, jewellery, sport and more). Switching templates keeps your text, images and settings.

Design: your brand

• Logo: upload once; the app icon and splash screen are generated from it, and you can replace either with your own image.
• Colours: pick a curated palette, set your own colours, or (Shopify) import the store's brand settings. Each palette has a tuned dark side for phones in dark mode.
• Fonts, shape and density: the type pairing, corner radius and spacing of the whole app.
• Motion and glass: subtle, cinematic or no animation, and translucent surfaces.

Screens and sections

Every screen (Home, Collection, Product, Cart, Account, Search) is a list of sections. Select a section on the phone or in the list to edit it; add, reorder, duplicate and hide sections; set where a section is shown (platform, audience, schedule). The home screen's header has its own styles: title, logo, centred logo, search bar or minimal, with up to three actions (search, bag, wishlist, account) and an optional tagline or greeting.

Navigation

The tab bar holds two to five tabs: home, collections, a collection, search, bag, account, wishlist or a page of your own. Choose the system tab bar or a floating one, and whether it shrinks while scrolling.

Saving, undo and publishing

Every change saves as a draft automatically ("Draft saved" in the top bar). Undo and redo with the arrows or ⌘Z / ⇧⌘Z. Nothing reaches shoppers until you press Publish.