Customize the home header of your Shopify mobile app

The home header is the bar at the top of your Shopify mobile app’s Home screen: an account button, a search bar and a cart button with a live item count, plus an optional announcement bar for one short message. You set it up in the MobiCart Builder with no code.

In short: in the Builder, open the Home page, click Header at the top of the layers list, choose the search bar’s text and style, the icons and their colors, turn on Show an announcement bar if you want one, then click Save as Draft, check it with Live preview and click Publish.

What the home header is #

The home header is always the first thing on Home. It can’t be moved or removed, which is why the layers list shows it with a lock and the note “Always at the top”. What you choose is how it looks and what it says.

It does three jobs. The search bar opens search, the cart button shows how many items are in the cart and opens it, and the account button opens the shopper’s account. The announcement bar adds a fourth: one message, such as a delivery offer, that can link to a product or a collection.

Home header settings at a glance #

Setting	Options	Default
Placeholder	The search bar’s text, up to 60 characters per language	“Search products”, in the shopper’s language
Search icon	Magnifying glass, Search with lines	Magnifying glass
Style	Filled, Outlined	Filled
Rounding	Square, Small, Medium, Large, Pill	Pill
Show the account button	On or off	On
Account icon	Person, Person in a circle	Person
Cart icon	Cart, Bag, Basket	Cart
Icon color	Text color, Primary color, Accent color	Text color
Cart count color	Primary color, Accent color, Red	Primary color
Show an announcement bar	On or off	Off
Message	Your text, up to 120 characters per language	Empty
Link	No link, a product or a collection	No link
Motion	Still, Scroll like a ticker	Still
Speed, Scroll direction, Pause while pressed	Slow, Medium, Fast; Right to left, Left to right; on or off	Medium; Right to left; on
Bar color	Primary color, Accent color, Neutral, Gradient (primary to accent), Custom colors	Primary color
Bar height	Compact, Regular, Tall	Regular
Space to the search bar	Small, Medium, Large	Medium
Position	Above the search bar, Below the search bar	Above the search bar
Run the color behind the status bar	On or off (only above the search bar)	Off

Part 1: Set up the header in the merchant dashboard #

Step 1: Open the header in the Builder #

In your Shopify admin, open the MobiCart app and go to the App Builder. Pick Home under Pages. In the layers list, Header sits at the top with a lock icon: click it. Its settings open on the right under the heading Header, and the phone in the middle shows every change as you make it.

The settings start with one line that sums up the header: “Always at the top of Home: the account button, the search bar and the cart with its item count.”

Step 2: Set up the search bar #

Under Search bar:

• Placeholder is the text inside the bar before a shopper types, for example “Search 2,000 products”. Leave it empty to show “Search products” in the shopper’s language. It holds up to 60 characters per language and stays on one line in the app.
• Search icon is the Magnifying glass or Search with lines.
• Style is Filled (a soft grey fill) or Outlined (a thin border).
• Rounding goes from Square through Small, Medium and Large to Pill, the fully rounded default.

The same placeholder also shows in the search screen that opens over Home, unless you leave it empty there too.

Step 3: Choose the icons and their colors #

Under Icons:

• Show the account button puts a person icon on the left. Turn it off for a cleaner header. When it is on, Account icon picks Person or Person in a circle.
• Cart icon picks Cart, Bag or Basket. The cart button is always there.
• Icon color colors the account and cart icons with your theme’s Text color, Primary color or Accent color.
• Cart count color is the small badge with the number of items: Primary color, Accent color or Red.

These colors come from your color theme, so the header changes with it when you change your theme.

Step 4: Add an announcement bar #

Under Announcement bar, turn on Show an announcement bar, then:

• Message: your text, shown exactly as you type it, up to 120 characters per language. In the app it takes up to two lines. The bar only shows when it has a message.
• Link (optional): where tapping the bar takes shoppers. Choose Link a product or Link a collection. A linked bar shows a small arrow (›) after the message; with No link, tapping it does nothing.

If your app is in more than one language, pick the language in the top bar and write the message in each one. Until a language has its own text, shoppers see the default-language message.

Step 5: Make the message scroll (optional) #

Motion is Still by default. Choose Scroll like a ticker to move the message sideways on one line, repeated with a dot between copies. Three more settings appear:

• Speed: Slow, Medium or Fast.
• Scroll direction: Right to left or Left to right.
• Pause while pressed: on by default. Press and hold stops the strip, and it moves again shortly after the finger lifts.

Phones set to reduce motion, or with a screen reader on, always show the message still. Keep a scrolling message short, because shoppers read it while it moves.

Step 6: Style the announcement bar #

• Bar color: Primary color, Accent color, Neutral, Gradient, primary to accent or Custom colors. Custom colors start as a dark bar (#111111) with white text. Pick a Background and a Text color, and turn on Fade into a second color to fade to a Second color.
• Gradient direction (for the gradient and for a fade): Left to right, Top to bottom or Diagonal.
• Bar height: Compact, Regular or Tall. The text size grows with it.
• Space to the search bar: Small, Medium or Large.
• Position: Above the search bar or Below the search bar.
• Run the color behind the status bar (only above the search bar): the bar and the top of the screen become one block of color.

Step 7: Save, preview and publish #

The header is part of the Home page, so it goes live with it:

1. Click Save as Draft. A draft is only visible on your preview device.
2. Click Live preview and scan the code with your phone’s camera. It opens your app in MobiCart Preview, which picks up new draft changes every few seconds.
3. When it looks right, click Publish to push the page live to your customers’ apps. More on this in Preview and publish your app.

Part 2: What shoppers see in the mobile app #

The header looks and works the same on iPhone and Android, with each platform’s own icon set.

In the header	What a tap does
Account button	Opens the shopper’s account screen
Search bar	Opens search over Home
Cart button	Opens the cart. The badge shows the number of items, up to 99, and hides when the cart is empty
Announcement bar	Opens the linked product or collection. Without a link, nothing happens

A few things to know:

• Bottom navigation takes over. If your bottom navigation has a Cart tab or an Account tab, the header leaves out its own cart or account button, so shoppers never see the same button twice.
• The count is always current. Home reads the cart each time it shows, so the badge updates when a shopper comes back from a product or the cart.
• Large text works. The search bar and the cart badge grow with the phone’s text size instead of cutting text off.
• Screen readers read the icons as “Account”, “Cart” (with the item count) and the search bar’s placeholder.

Recommended setups #

Store type	Search bar	Icons	Announcement bar
Fashion, beauty	Filled, Pill	Bag, Text color	Still, Neutral, “Free returns within 30 days”
Large catalog, electronics	Outlined, Medium, a placeholder that says what you sell	Cart, Primary color	Linked to a collection of current deals
Food, drink	Filled, Large	Basket, Accent color	Scroll like a ticker, Slow, delivery cut-off times
Drops, limited editions	Filled, Pill	Cart, Red count	Above the search bar, behind the status bar, linked to the drop

Troubleshooting #

Problem	Cause	Fix
The announcement bar doesn’t show	The switch is on but Message is empty	Type a message
The bar doesn’t move	The phone is set to reduce motion, or a screen reader is on	Nothing to fix: those shoppers get the still bar on purpose
No cart or account button in the header	Your bottom navigation has a Cart or Account tab	Expected: the tab replaces the button
Tapping the bar does nothing	It has no link	Under Link, choose a product or a collection
Shoppers see the old header	The Home page isn’t published	Click Publish on Home
The message shows in the wrong language	That language has no text of its own yet	Switch the Builder’s language and write the message

Frequently asked questions #

Can I remove the home header? #

No. The header is always the top of Home, so shoppers can always search and reach their cart. You can hide the account button and the announcement bar.

How long can the announcement message be? #

Up to 120 characters per language. A still bar shows up to two lines; a scrolling bar shows one line.

Can the announcement bar link to a web page? #

No. It links to a product or a collection in your store.

Can I change the search bar’s text? #

Yes. Type it in Placeholder, up to 60 characters. Empty, it shows “Search products” in the shopper’s language.

Why is there no cart button in my header? #

Your bottom navigation has a Cart tab. The header leaves out its own cart button when a tab already does the job, and the same goes for the account button.

Does a scrolling announcement work for every shopper? #

Shoppers who turn on Reduce Motion or use a screen reader see the message still, which is easier for them to read.

Do I need to publish header changes? #

Yes. The header is part of the Home page: save it as a draft, check it with Live preview, then click Publish.

Need a hand? #

Book a free 30-minute demo and we will set up your app’s header with you.