Bottom tabs and trust badges

These two are edited the same way: on the Sections tab of the Studio's left rail, you click the thing, and its settings appear in the right-hand panel. Neither needs a new release — both go live with Publish Live in seconds. The difference is where they live. The tab bar is global chrome: one bar, on every screen, edited from a fixed card at the bottom of the outline. Trust badges are a block you add to a page, so you can have them on your home page, your cart page, both, or neither.

The bottom tab bar#

1. 01

   Open the Footer tabs card

   On the Sections tab, scroll to the bottom of the block outline. Below the last block sits a card labelled Footer tabs with the sublabel global · all pages. Click it. The right-hand panel changes its heading to Footer tabs · all pages.

2. 02

   Edit one tab at a time

   Each tab is a small card — Tab 1, Tab 2 and so on — with three controls: Destination, Label and Icon. The phone preview redraws as you type.

3. 03

   Add or remove

   + Add tab (3/5) at the bottom appends a tab; the numbers in it are live. Remove in a tab's header deletes it. You must keep at least two and you cannot have more than five — at those limits the buttons simply grey out.

What the dropdowns mean#

Both dropdowns show Uruvak's internal words rather than friendly ones, so here is the translation. Destination is where the tab takes a shopper:

Icon is the glyph above the label. Twelve are available; they are drawn as clean outlines, and fill in solid when that tab is the selected one.

Things to know before you rearrange#

A new tab arrives pre-filled. Press + Add tab (3/5) and you get a tab pointing at home, labelled "Tab", with the house icon. Change all three fields. Nothing stops two tabs pointing at the same destination, and nothing warns you when they do.

There is no way to reorder tabs. The order in the panel is the order across the bottom of the screen, and this panel has no drag handle and no up/down arrows. To move a tab, retype the three fields of the tabs you want to swap.

Keep labels to one short word. Four or five tabs share the width of a phone. "Home", "Shop", "Cart", "Account" fit; "My account" does not. If you clear a label completely, the tab keeps working but shows the icon with nothing underneath it.

The cart tab counts. A tab whose destination is cart gets a small round badge with the number of items in it. No other destination does.

Turning the bar off removes it everywhere. The Show footer tabs checkbox at the top hides the bar on every screen at once, which leaves shoppers navigating only through your header and the blocks on the page. Most shops should leave it on.

Trust badges#

Trust Badges is a block: a row of one to four tiles, each an icon over a short line of text, for the promises that make someone press Buy — free shipping, returns, a secure checkout, a phone number that a human answers.

You can add it to your home page and your cart page. It is not offered on the category or product pages; the block palette only ever lists blocks that are legal on the page you're designing.

1. 01

   Add the block

   On the Sections tab, with the page dropdown set to Home or Cart, press Add block and choose Trust Badges from the Merchandising group. It is appended to the bottom of the page — drag the six-dot grip on its row up to where you want it.

2. 02

   Edit the first badge

   The new block arrives with one badge titled "Free shipping". The right panel reads Block settings, then Badges with a counter like 1/4. Type over the Title, and add a Subtitle (optional) if the promise needs a condition.

3. 03

   Pick an icon

   Click the square icon button to the left of the title. A picker opens with a search box — type what you want, not what it's called, so truck, lock, star, headset all work — and the matching icons appear in a grid. Click one.

4. 04

   Add up to three more

   + Add badge appends a badge titled "New badge" with a star icon. Four is the maximum; the ↑ and ↓ buttons on each card reorder them and ✕ deletes one.

Subtitles are one line, titles are two. Anything longer is cut off with an ellipsis on the phone. "Free shipping" / "Orders over $60" is the right shape. A whole sentence is not.

The icon picker's other two buttons. Auto does not pick a clever icon for you here — it sets a plain tick in a circle. 🖼 Use a custom image instead opens your store's media library so you can use your own artwork — a payment-provider logo, for example. Square images work best, and as everywhere else in Uruvak the image has to be in WordPress › Media already, or at a web address you paste.

Four badges is a squeeze. The tiles share the width of the screen, so at four the text gets tight. Three is usually the sweet spot; on the cart page, two often reads better.

Getting it onto phones#

Nothing on this page touches the app's icon, its name or anything else baked into the installed app, so nothing here needs a release. Press Publish Live and shoppers get the new tabs and badges the next time they open the app. If Publish Live is greyed out, your app has not had its first release yet — see Take a release.

When it doesn't look right#

A tab I removed came back. You were at two tabs, where Remove is disabled. Add a replacement first, then remove.

A badge vanished while I was editing it. Its title was empty at that moment. Add it again with + Add badge.

The tab bar doesn't appear in the preview. Check the Show footer tabs checkbox at the top of the panel.

The icon I searched for isn't there. The grid shows the first 120 matches, so a broad word like a is useless. Try a shorter, more specific word — bag, card, leaf.

Next: What your shoppers see walks through the finished app screen by screen, and Publish live is how all of this reaches a phone.