Utility Bar

Every website has this screen.

The bar is the slim strip that sits above your menu on a computer. On a phone it is not a strip at all. It becomes a row of icons pinned to the bottom of the screen, where a thumb can reach it.

Every style shows the bar, all ten of them. Change your style on the Appearance page and the bar stays as you set it here.

Go to Plugins, then Utility Bar. It sits in the Site Layout group.

Layout

The first card. It sets how many columns the row has, and how wide each one is.

There are eight choices: 1, 1 · 1, 2 · 1, 1 · 2, 1 · 1 · 1, 2 · 1 · 1, 1 · 2 · 1, and 1 · 1 · 2.

Read them as shares of the row. 1 · 1 is two columns of the same width. 2 · 1 is two columns, and the left one is twice as wide.

Start with 1. One column is enough for most sites.

Preview

The next card draws the row as you have set it up. Each item shows as a small gray chip.

It is there to show placement, not styling. A column with nothing in it says empty.

The columns

Below the preview there is one card per column.

Align sets which end of the column the items sit at: Left, Center or Right.

Under that is the list of items in that column. An empty one reads No modules in this column yet.

To add one, click a name next to Add module: CTA, Search, Free text or Commerce links.

To move an item, drag it by the grip. Or use the buttons on its row: Move up, Move down, Move to previous column and Move to next column.

What you can put in the bar

Item	What it shows
CTA	An icon and a few words that go somewhere. A phone call, a text, an email, or a page.
Search	Your site’s search box.
Cart & account	The cart and the account icons. Added with the Commerce links button.
Free text	One line of plain text, such as your hours.

Two rules. You can only have one Search in the bar, and only one Cart & account. The buttons for them gray out once you have added one.

Search only draws something when Site Search is switched on. Cart & account only draws something on a site with the shop. See Commerce.

Free text never shows on a phone. There is no icon that means a sentence.

The CTA item, and what to type

A CTA is a link with an icon. Pick an Action first. That choice decides what belongs in Destination.

Say Northwind Heating wants a call button. Here is what each action wants.

Action	What to type in Destination
Phone call	The number to dial: 555-0199
Text message	The number to text: 555-0199
Email	The address: hello@northwindheating.example
WhatsApp	The number on the WhatsApp account: 555-0199
Messenger	The Facebook page name, northwindheating, or a pasted m.me link
Link	A page on your site, /quotes, or a full web address

Label is the wording beside the icon, such as “Call us”. It shows on a computer.

Show on mobile puts the item in the icon bar on phones. It starts checked. On a phone the bar has room for the icon only. Your label is still read out to anyone using a screen reader.

Search and Cart & account have their own Show on mobile box too.

Behavior

One check box: Hide the bar when scrolling down.

Turn it on and the bar slides out of the way as a visitor reads down the page. It comes back as soon as they scroll up.

That is for computers and tablets only. The icon bar at the bottom of a phone is never hidden.

It only works when your header stays at the top of the screen as people scroll. If your header scrolls away with the page, the bar goes with it, and this box does nothing. The Appearance page sets whether the header stays put.

Mobile bottom bar

The last card counts your slots for you. It reads something like 3 of 5 mobile slots used.

A phone has room for five icons. The rules:

• Cart & account takes two slots, not one.
• Free text takes none. It never shows on a phone.
• Anything past the fifth slot simply does not appear.

The count is a top number, not a promise. An item with an empty Destination is skipped, so the bar can show fewer icons than the count says.

Saving

Click Save. You get a message reading Utility bar saved.

There is no publish step. This is a settings screen, so the new bar is on your website right away.

If someone else saved this screen while you had it open, a note says so. Click Save again to keep your version, or Discard to load theirs.

There is also no on and off switch. A bar with nothing working in it draws nothing at all.

When something is missing

The whole bar is gone. Nothing in it resolved to a working link. Check that at least one item has a Destination filled in.

An item shows on a computer but not on a phone. One of three things. It is past the fifth slot. Its Show on mobile box is unchecked. Or its Destination is empty.

A link in the bar is broken. The Site checks box on the SEO page lists bar links that lead nowhere.

The search box is missing. Site Search is switched off. The item in the bar cannot switch it back on.

The cart is missing. That site does not have the shop add-on.