> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Utility bar

> A slim strip above the header with up to four short store perks, a few utility links and the monitor that switches the store between light and dark mode.

![Utility bar on the storefront](https://mintcdn.com/kwebby/MS8e7xtq5qj3x24S/images/kelvin/utility-bar.webp?fit=max\&auto=format\&n=MS8e7xtq5qj3x24S\&q=85\&s=8a4d420049f7548750e39bd80527451c)

Utility bar, highlighted with the demo content

![Utility bar in dark mode](https://mintcdn.com/kwebby/MS8e7xtq5qj3x24S/images/kelvin/utility-bar-dark.webp?fit=max\&auto=format\&n=MS8e7xtq5qj3x24S\&q=85\&s=022bdb0cb187036fe0a0f186ea97552d)

Utility bar in dark mode

## Where to find it

Every page, at the very top. In the theme editor open any page, then select Utility bar in the Header group of the sidebar. It can only live in the Header group; if you remove it, add it back there with Add section.

## How it works

* Perk blocks show at the start of the bar, each with an optional icon in the accent color. A perk with a Link becomes a link.
* Links shows the links of one menu at the end of the bar, such as Track order and Help.
* The monitor at the very end is the color mode switch: screen on is light mode, powered off with an amber standby light is dark mode. It shows while Theme settings → Colors → Show the color mode switch is on. See [Light and dark mode](https://docs.kwebby.com/kelvin/guides/light-and-dark-mode.md).
* Wider than 1180 px every perk shows. From 1180 px down only the first two perks show, and from 1000 px down the links hide too.
* On phones under 750 px the perks and links hide and the monitor sits alone in the middle of the bar.
* The bar uses the Stage scheme (scheme 3) by default, which stays dark in light and dark mode.
* The bar scrolls away with the page; only the Header stays at the top when it is sticky.

![Utility bar in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-utility-bar.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=e13dde57afd9b69e6b773aa1964d8ddf)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Select a Perk block, pick an Icon (Truck, Shield, Pin, Return, Card, Chat, Bolt, Leaf or None) and type a short Text, about 30 characters, so two perks fit on a tablet.
* Add a Link to a perk that has a page behind it, for example your shipping policy.
* Up to 4 perks. Put the two that matter most first: they are the ones tablets keep.
* Under Links, choose a short menu (build it in Content → Menus). Choose the same menu under Extra links in the phone menu in the Header, since the bar hides its links on phones.
* To hide the monitor, untick Theme settings → Colors → Show the color mode switch.

## Settings

| Setting | What it does |
| - | - |
| **Links** | Choose a menu. Short links on the right, such as Track order and Help. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 3. |

> [!TIP]
>
> The color mode switch (a monitor: screen on for light, powered off for dark) is set in Theme settings, Colors.

## Blocks

Up to 4 blocks. Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Perk

| Setting | What it does |
| - | - |
| **Icon** | Options: None, Truck, Shield, Pin, Return, Card, Chat, Bolt, Leaf. Default: Truck. |
| **Text** | Text. Default: Share your shipping offer. |
| **Link** | Link: a page, product, collection or web address. |

> [!NOTE]
>
> The three perks on install are guidance text: Share your shipping offer, Share your returns policy and Mention pickup or store hours. Replace them with what your store really offers, or remove them. The second perk has the Shield icon, so pick Return if it stays about returns.
>
> On phones under 750 px the monitor is the only thing in the bar, so with the switch hidden the whole bar is hidden on phones.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.