Header: Header Icons
Header Icons
The Header Icons block contains the row of action icons in the header — cart, search, account, wishlist, language, currency, and more. You choose which icons are displayed, in what order, how each one looks, and whether a small label appears next to or below it.
This is a busy block because it brings together many separate icons in one place. The good news: each icon has the same set of settings, so once you've set up one, the rest follow the same pattern.
What it shows
A compact row of icons, usually on the right side of the header. Each icon is a shortcut: the cart opens the cart, the account icon goes to login or 'my account', the search icon opens the search bar, and so on. Some icons also display a badge (like the number of items in the cart).
Available icons
You can turn each of these on or off independently:
Icon | What it does |
|---|---|
Cart | Opens the cart |
Search | Opens the search bar |
Account | Goes to login / my account, and can show login status |
Wishlist | Opens the customer's saved / favorite products |
Main Menu | An icon that opens the menu |
Newsletter | Opens newsletter signup |
Currency | Allows the customer to change currency |
Language | Allows the customer to change language |
Country | Allows the customer to change country |
VAT. | Switches between prices with or without VAT. |
Customer Club | Shows membership status for the customer club |
Dependencies — icons that require something extra
Some icons are only displayed if the store has what they need in place. If you turn them on without the prerequisite being met, they simply won't appear in the frontend.
Icon | Requires | How to set it up |
|---|---|---|
Wishlist | The extension Favorites / Wishlist for design builder | Install the extension under Extensions → Your extensions. Without it, the wishlist icon will not be displayed, even if you enable it here. |
Currency | More than one currency in the store | The icon is only displayed when the store has at least two currencies. If you only have one, there's nothing to switch between, and the icon is automatically hidden. |
Language | More than one language in the store | Same as currency — the icon is only displayed when the store has at least two languages. |
Customer club | An active customer club | The customer club must be set up. The icon changes appearance and text depending on whether the customer is a member, logged in without membership, or logged out. |
Settings shared by each icon
For each icon you activate, you can set:
Setting | What it controls |
|---|---|
Show | Whether the icon is displayed at all |
Order | Its position in the row relative to the other icons |
Icon | Which symbol represents it (choose from the icon set) |
Icon color | The color of the icon |
Text | An optional label displayed with the icon |
Text color | The color of the label |
Text placement
The switch Show text below icon and the dropdown menu Text placement determine whether the labels appear next to the icon or below it. Use labels when the icon alone might be unclear (for example, to display «Account»).
Special cases worth knowing about
Some icons have extra behavior:
- Account — turn on Show login status to display different text depending on whether the customer is logged in (you set the text for logged in and logged out yourself).
- VAT. — set custom labels for «VAT included» and «VAT excluded», and optionally show an automatic VAT popup.
- Customer club — set different icon colors and labels for members versus non-members, so the icon reflects whether the customer has signed up.
- Search — the search icon can open a built-in search field directly in the header. You control the field's background, text color, border, corner radius, button colors, and where it appears (top and right position).
Styling of the entire row
Setting | What it controls |
|---|---|
Badge color | The background of the quantity badge (e.g., quantity in cart) |
Text color on badge | The number inside the badge |
Icon size | The size of all icons in the row |
Text size | The size of the icon labels |
Icon padding | Space around each icon |
Icon background | A background fill behind the icons |
Default icon color | A default color for icons that don't have their own |
Corner radius / global radius | Rounds the icon backgrounds |
Tips
- Use Order-number on each icon to arrange the row exactly as you want — lower numbers come first.
- Don't turn on all icons. An overcrowded icon row is harder to use than three to four well-chosen shortcuts.
- The search icon's built-in field is the fastest search option for most stores. If you prefer a permanent search box, use the Search Field block instead.
- The VAT, currency, language, and country icons only make sense if the store actually offers these options. Hide those you don't use.