Colors, fonts and theme
Pick one of five design languages, fine-tune the seven colors and the corner shape, and set the logo your app shows while it opens.
The Theme tab is the second half of the Studio's left rail. It sets everything that is true on every screen of your app at once: the palette, the typefaces, how round the corners are, the name shown inside the app, and the two images shoppers see at launch. Every one of these travels to phones with Publish Live in seconds. None of them needs a new release — the two things that do, your app icon and your package name, live in Settings › General instead.
Start with a design language#
A design language is a whole look in one click: fonts, corner radius and all seven colors at once. There are five, and the cards sit in this order.
| Design language | Its card reads | Good for |
|---|---|---|
| Ember (the default) | Marketplace energy — amber accents, dense merchandising | Electronics, general stores, anything with a lot of products on screen |
| Atelier | Fashion editorial — warm ivory, ink, serif display, sharp corners | Clothing, jewellery, anything that wants white space |
| Verde | Fresh grocery — deep green, mint surfaces, rounded pills | Food, garden, wellness |
| Onyx | Dark luxury — near-black, champagne gold, serif hairlines | High-ticket goods; this is the only dark theme |
| Peak | Athletic — ink blocks, electric lime, condensed italics | Sportswear, supplements, streetwear |
Open the Theme tab
In the Studio, the left rail has a two-part switch: Sections and Theme. Click Theme. The block outline is replaced by the theme groups, and the Add block button disappears until you switch back.
Click a card
Each card shows the name, a one-line description and a five-color strip. Click one and the phone preview in the middle redraws immediately — new fonts, new corners, new palette. The card you are on is marked Active.
The seven colors#
Open the Colors group and you get seven fields in two columns. Each one is a color square you can click to open your computer's color picker, next to a text box holding the hex value.
| Field | What it paints in the app |
|---|---|
| Primary | Button backgrounds, the selected bottom tab, star ratings — your brand color |
| Background | The page behind everything, and in most design languages the top bar and tab bar too |
| Text | Headings, product names, prices |
| Surface | Cards and tiles that sit on the background |
| Muted text | Second lines: subtitles, captions, the tabs that aren't selected |
| Borders | Hairlines around cards and between rows |
| Sale price | The discounted price and the −25% flash on a product photo |
Under the grid the panel reminds you: Applied across every page of the app. There is no per-page palette.
Buttons and corner radius#
The Buttons group has two controls. Button text is the color of the words and icons printed on your primary color — the panel spells out that buttons use the primary color as their background, so this is the only lever you have over legibility there. Pick white on a dark primary, near-black on a light one.
Corner radius is a number box, not a slider. Type a whole number from 0 to 40. It rescales the whole family of rounded things — cards, images, inputs, tiles — rather than setting one literal size, and anything your design language drew as a pill stays a pill. Verde's buttons stay fully rounded whatever you type. A decimal, an empty box or anything above 40 is thrown away silently and the old number comes back.
The app name and the store address#
The Branding group holds two text fields. They save themselves about a second after you stop typing; the top bar flips from Saving… to Draft saved.
App name is between 1 and 30 characters. You cannot clear it, and the 31st character is silently dropped. Inside the app this name shows on the loading screen and in the top bar when your header has no logo and no title.
Store URL is the address of the WooCommerce shop this app reads its products from. It is filled in for you when you connect, and you should normally leave it alone — pointing it somewhere else points the whole app somewhere else. If you do have to change it, paste the full address in one action: a half-typed address is not a valid address, so it gets rejected the same way a half-typed hex does.
The loading screen#
The Loading screen group sets what shoppers look at for the second or two while the app fetches your design. With no logo, the app draws a square monogram — the first letter of your app name, on your primary color — with the app name underneath. Add a logo and it replaces the monogram.
Press Choose logo
The 64×64 tile on the left previews the result on your background color. Once a logo is set the button reads Change logo, and a Reset to default link appears under it to go back to the monogram.
Pick the image from your store
The Choose an image · store media window lists the images already in your WordPress media library. Search by name, press Load more for older uploads, or paste a web address at the bottom and press Use URL.
If the window says No images found. Upload images in WordPress → Media, or paste a URL below. and you know your library is full of images, your store is not answering Uruvak. That is a connection problem, not an image problem — see When the connection breaks.
The launch banner#
The Launch banner group adds a pop-up card over your home screen when the app opens: an image, tappable, with a close button. Turn on Show a banner when the app opens and the group header gains an On pill.
Choose the image
Press Choose image — the same store-media window opens. Portrait or square images work best; the card is about three units wide to four tall. Remove image clears it again.
Choose how often it shows
Every open shows it every single time the app is opened. Only once shows it once per image — change the image later and every shopper sees the new one once.
Choose where a tap goes
Tapping the banner opens offers No link, Product, Category, Custom URL and In-app screen. Product and Category pull the live list from your store.
What goes live, and when#
| What you changed | How it reaches shoppers |
|---|---|
| Design language, any of the seven colors, corner radius, button text | Publish Live — seconds, no new install |
| Loading logo, launch banner, the name inside the app | Publish Live — seconds, no new install |
| App icon, package name, the name under the home-screen icon | A new release, which shoppers install from Google Play |
On the free plan you get five Live Publishes for the lifetime of the account, so do not publish after every single color tweak. Get the theme how you want it in the preview — the preview is accurate — and publish once. Plans and limits has the full picture.
When it doesn't look right#
A color box snapped back to the old value. You typed a partial hex code. Use the color square, or paste the whole thing.
All my colors reverted at once. You clicked a different design language. There is no undo; set them again, and change design language before you tune colors next time.
The corner radius won't take. It must be a whole number between 0 and 40, and pills stay pills regardless.
The preview looks right but my phone doesn't. Either you haven't pressed Publish Live, or the app hasn't been reopened — shoppers pick up a publish the next time they open the app, not while they are in it.
My phone still shows the old app name under the icon. That name only changes with a new release and a fresh install.
The image window is empty. Your store isn't answering. Check When the connection breaks.
Next, put your brand on the rest of the chrome: Bottom tabs and trust badges covers the row of tabs across the bottom of every screen, and App name, icon and package name covers the two things on this page that need a release.