MobiCart
Your Shopify mobile app’s colors come from a color theme you pick in the MobiCart Builder: 20 ready-made themes, each of which you can recolor to match your brand, with no code. This tutorial covers every color setting and what shoppers see on iPhone and Android.
In short: in the Builder, click Colors, pick a theme, adjust any of its colors under Make your own, and check the result on your phone. Colors apply to your app right away, with no Publish needed.
What a color theme is #
A color theme is a set of colors that every screen of your app uses: the top bar, the tab bar, buttons, product cards, banners and the account screen. You pick one theme for the whole app, then change any color in it.
A theme changes colors only. Your page layouts, your blocks and their settings stay as they are, so you can try themes freely.
Colors at a glance #
| Setting | Where | What it does | Default |
|---|---|---|---|
| Color theme | Colors panel, left | Sets every color in the app at once | Classic (black and white) |
| Brand colors | Settings, right | Primary, Secondary and Accent, each with its text color | From the theme |
| Page colors | Settings, right | Background, text, cards, subtle fills, secondary text, borders | From the theme |
| Status colors | Settings, right | Error, Text on error, Success, Warning | From the theme |
| Reset | Settings, right | Puts one color, or all of them, back to the theme’s own | Off until you change a color |
Part 1: Set your colors in the merchant dashboard #
Step 1: Open Colors in the Builder #
In your Shopify admin, open the MobiCart app and go to the App Builder. In the left rail, click Colors. The Builder stays on the same page: the left side lists the color themes and the right side shows the settings for the theme you use, under Make <theme> your own.
The phone in the middle shows your own app with the colors applied, so you see every change on your real pages.
Step 2: Pick a color theme #
Click a theme to apply it. MobiCart has 20: Classic, Midnight, Ocean, Forest, Coral, Blush, Luxe, Lavender, Citrus, Slate, Sunset, Mint, Berry, Espresso, Sky, Ruby, Sand, Aurora, Graphite and Tropical. Classic, a black-and-white look, is the default.
Each card shows a small preview of the theme’s main colors and its name. The theme your app uses has an Active badge, and a theme you have recolored shows Customized. A message confirms the change, for example “Ocean applied to your app”.
Every built-in theme keeps text readable: its text colors meet a 4.5:1 contrast ratio against their backgrounds, the level the Web Content Accessibility Guidelines ask for.
Step 3: Make the theme your own #
On the right, change any color with its color picker. The colors are in three groups:
| Group | Colors | Where shoppers see them |
|---|---|---|
| Brand | Primary, Text on primary, Secondary, Text on secondary, Accent, Text on accent | Buttons, the active tab, header icons, banners, the selected chip |
| Page | Background, Text, Cards, Text on cards, Subtle fills, Secondary text, Borders | The top bar, screen backgrounds, product cards, the tab bar, the search field |
| Status | Error, Text on error, Success, Warning | The cart badge and error messages |
A good start is to set Primary to your main brand color and Accent to your second one, then check their text colors.
Colors use six-digit hex values, such as #1A1A1A. Your changes save on their own a moment after you stop editing.
Your changes are kept per theme. If you switch to another theme and back, your custom colors are still there.
Step 4: Fix any hard-to-read text #
If two colors are too close, a yellow warning appears: Some text may be hard to read. It names each pair, for example “Text on primary”, and asks you to pick colors further apart so text keeps at least 4.5:1 contrast.
The warning does not stop you from saving, but shoppers will struggle to read that text. Make the text color lighter or darker until the warning goes away.
Step 5: Reset a color, or all of them #
A changed color gets a small reset button beside it that puts back the theme’s own color. To start over, click Reset to <theme> colors at the bottom. It is greyed out until you change something.
Step 6: Check it on your phone #
Colors apply to your app right away: there is no Publish step for colors. To see them on a real phone, click Live preview in the top bar and scan the code with your phone’s camera. It opens your app in MobiCart Preview, which picks up new colors within a few seconds.
Your page layouts and blocks still need Publish as usual. Colors don’t.
Part 2: What shoppers see in the mobile app #
Every screen follows the theme #
The colors change every screen at once, on iPhone and Android alike:
- Top bar and backgrounds use Background and Text.
- Tab bar uses Cards, with Primary for the selected tab and Secondary text for the others.
- Home header uses Primary and Accent for its icons and buttons, Subtle fills and Borders for the search field, and Error for the cart badge.
- Product cards use Cards.
- Banners and countdowns use Primary and Secondary with their text colors.
- Category chips use Subtle fills, with Text on accent for the selected chip.
When shoppers get new colors #
The app fetches your colors when a shopper opens it. A shopper who has the app open sees the new colors the next time they launch it.
Recommended setups #
| Store type | Start from | Then change |
|---|---|---|
| Fashion, beauty | Classic, Blush or Luxe | Primary to your brand color |
| Sports, outdoor | Forest, Ocean or Slate | Accent for sale banners and badges |
| Food, drink | Espresso, Citrus or Sand | Background to a warm tint |
| Electronics | Graphite, Midnight or Sky | Primary and Accent from your logo |
| Kids, gifts | Coral, Berry or Tropical | Keep the theme, check text contrast |
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| Colors didn’t change in the app | The app loads colors when it opens | Close the app fully and open it again |
| “Some text may be hard to read” | A text color is too close to its background | Make the text lighter or darker until the warning goes away |
| My custom colors are gone | You switched themes | Switch back: custom colors are kept per theme |
| Reset is greyed out | Nothing is changed in this theme | No action needed |
Frequently asked questions #
How do I change my Shopify app’s colors? #
Open the MobiCart Builder, click Colors, pick a theme, then change any color on the right. Your app uses the new colors right away.
Do I need to publish after changing colors? #
No. Colors apply to your app as soon as you change them. Only page layouts and blocks need Publish.
Can I use my exact brand colors? #
Yes. Every color in the theme takes a hex value, so you can enter your brand’s exact colors.
Will changing the theme change my layout? #
No. A theme changes colors only. Your pages, blocks and their settings stay as they are.
Are my custom colors lost if I try another theme? #
No. MobiCart keeps your changes for each theme, so you can switch back and find them again.
How many color themes are there? #
There are 20: Classic, Midnight, Ocean, Forest, Coral, Blush, Luxe, Lavender, Citrus, Slate, Sunset, Mint, Berry, Espresso, Sky, Ruby, Sand, Aurora, Graphite and Tropical.
Do the colors look the same on iPhone and Android? #
Yes. One theme drives both apps.
Need a hand? #
Book a free 30-minute demo and we will choose your app’s colors with you.
