# Utility Bar

The slim strip above your header, and the icon bar on phones.

Source: https://docs.lookoutridgeit.com/plugins/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](https://docs.lookoutridgeit.com/plugins/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](https://docs.lookoutridgeit.com/plugins/site-search/) is
switched on. **Cart & account** only draws something on a site with the shop.
See [Commerce](https://docs.lookoutridgeit.com/commerce/overview/).

**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](https://docs.lookoutridgeit.com/plugins/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](https://docs.lookoutridgeit.com/plugins/seo/#site-checks) page lists bar links that lead nowhere.

**The search box is missing.** [Site Search](https://docs.lookoutridgeit.com/plugins/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.

**Tip**
The bar that came with your website is one column, right aligned, with search
and the cart icons in it. If you change things and want that back, that is
what to build.