In your menu, click the 2 Design step on the left step bar. The Text style block is in two places: the Main menu tab › Main menu item and the Sub menu tab › Sub menu item. This is where you adjust the text color, text size, font weight, font and small description text for menu items.
If you want to follow step-by-step instructions, open Style the main menu. This article is for looking up what each field does. These fields work the same way on Shopify, Wix and other websites.
Adjust the main menu text (level 1)
Click the 2 Design step, choose the Main menu tab, then scroll down to the Text style block (under the Main menu item label). Level 1 is the set of items that shoppers see first on the web, such as the buttons at the bottom of a Tab Bar, the items in the header bar of a Desktop Mega Menu, or the first list that opens in a Mobile Menu. All 6 menu types have this section.
| Field in the app | What it does | Default for new menus |
|---|---|---|
| Text Color | Changes the text color of menu items. Click the field to pick from the palette, or type a #RRGGBB code. |
#000000 |
| Text Size (px) | Changes the font size in px. When you click the field, the app shows preset sizes to choose from. | 11 for a Tab Bar made from a template; empty means the menu shows 10 |
| Text Transform | Changes the capitalization: Default (inherit) follows the theme, None keeps the text as typed, Capitalize capitalizes the first letter of each word, UPPERCASE capitalizes everything, lowercase writes everything in lowercase. | Default (inherit) — follows the theme |
| Font Weight | Changes how bold the text is, from the thinnest Thin (100) to the boldest Heavy (900). In the dropdown, each line shows its real weight so you can see and choose straight away. | Default (inherit) |
| Font Family | Picks a font from the list of Google Fonts. Next to the label is Other?, which links to instructions for using your store’s own font. | Use Default — the theme’s font |
| Description Color | Changes the color of the small description line under the item name. | Empty: follows the main text color but faded to 0.6 opacity |
| Description Size (px) | Changes the font size of the small description line. | Empty: 70% of the main text size |
Some situations where you’ll often need to adjust these:
- The text blends into the menu background and is hard to read: change the Text Color, or change the whole color set with the Palette.
- The menu font doesn’t match the font of your store: choose a Font Family that matches your theme’s font. If your font isn’t in the list, see Custom CSS and fonts.
- The items on the Tab Bar are cramped or the text overflows: reduce the number in the Text Size (px) field.
The description line only shows for items that have Sub text (Optional). To learn how to add it, see Icons, images and badges.
Text Color
Where it is and what it’s for: 2 Design step › Main menu tab › Text style › Text Color. This field changes the color of level 1 item names.
How to choose: click the field to pick from the palette, or type a #RRGGBB code. The default is #000000 (black). A menu made from a template uses that template’s color.
Applies to: all 6 menu types, level 1 items only, on Shopify, Wix and other websites. No paid plan needed.
What shoppers see: the item name, the small description line below it (if you haven’t picked a separate color in Description Color), and the arrow next to a parent item all change to this color. The arrow is the same color but lighter. An item where you’ve set its own text color in the Edit item form keeps that color and doesn’t follow this field.
Text Size (px)
Where it is and what it’s for: 2 Design step › Main menu tab › Text style › Text Size (px). This field changes the font size of level 1 item names, in px.
How to choose: type a number, or click the field and choose a preset size. A Tab Bar made from a template usually has 11 set. If you clear the field, the menu uses 10px.
Applies to: all 6 menu types, level 1 items only, every platform. No paid plan needed.
What shoppers see: the item name text gets bigger or smaller. If the Tab Bar is cramped or the text overflows, reduce this number. The text size of level 2–3 items is set separately in Text Size for level 2–3. The small description line has its own field, see Description Size.
Text Transform
Where it is and what it’s for: 2 Design step › Main menu tab › Text style › Text Transform. This field changes how the level 1 item name is capitalized, so you don’t have to retype the item name.
Options: Default (inherit) follows the theme (default) · None keeps the text as typed · Capitalize capitalizes the first letter of each word · UPPERCASE capitalizes everything · lowercase writes everything in lowercase.
Applies to: all 6 menu types, level 1 items, every platform. No paid plan needed.
What shoppers see: for example, if the item name you typed is New arrivals, Capitalize shows New Arrivals, UPPERCASE shows NEW ARRIVALS, and lowercase shows new arrivals. It only changes how the text is displayed; the original name in the menu doesn’t change. This field only affects the item name, not the small description line.
Font Weight
Where it is and what it’s for: 2 Design step › Main menu tab › Text style › Font Weight. This field changes how bold the level 1 item name is.
Options: a dropdown from Thin (100) to Heavy (900), each line showing its real weight. Default Default (inherit): the theme and font decide.
Applies to: all 6 menu types, level 1 items, every platform. No paid plan needed.
What shoppers see: the item name text looks thinner or bolder. If you’ve picked a Google font in the Font Family field, the app only loads the weight you chose, so the page doesn’t get heavier. If the font doesn’t have the weight you chose, the browser uses the nearest weight that’s available.
Font Family
Where it is and what it’s for: 2 Design step › Main menu tab › Text style › Font Family. This field changes the font of the whole menu. Next to the label is a link, Other?, that leads to instructions for using your store’s own font (see also Custom CSS and fonts).
Options: Use Default makes the menu use the theme’s font (menus made from a template usually start like this), or pick a font from the Google Fonts list.
Applies to: all 6 menu types, every platform. No paid plan needed. The font chosen here is the shared font of the whole menu: level 2–3 follow it, unless you choose a separate font in Font Family for level 2–3.
What shoppers see: the item names and small description text in the menu change to the new font. Choosing Use Default means the app doesn’t load any extra font.
Description Color
Where it is and what it’s for: 2 Design step › Main menu tab › Text style › Description Color. This field changes the color of the small description line (Sub text) under the level 1 item name.
How to choose: pick from the palette or type a #RRGGBB code. If empty (the field shows Inherit (opacity 0.6)), the description line follows the main text color but is faded to 0.6 opacity.
Applies to: all 6 menu types, level 1 items, every platform. No paid plan needed. This field only has an effect on items that have Sub text (Optional) filled in. To learn how to enter it, see Icons, images and badges.
What shoppers see: when you pick a color, the description line changes to exactly that color and is no longer faded.
Description Size (px)
Where it is and what it’s for: 2 Design step › Main menu tab › Text style › Description Size (px). This field changes the font size of the small description line under a level 1 item name.
How to choose: type a number in px, or choose a preset size. If empty (the field shows Inherit (70%)), the description line is about 70% of the main text size.
Applies to: all 6 menu types, level 1 items, every platform. No paid plan needed. It only has an effect on items that have Sub text (Optional).
What shoppers see: the description line gets bigger or smaller, and the item name doesn’t change.
Adjust the submenu text (level 2–3)
Click the 2 Design step, choose the Sub menu tab, then scroll down to the Text style block (under the Sub menu item label). Level 2–3 items are the items inside the panel that opens after a shopper taps a level 1 item. This section is available in the Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Icon Menu doesn’t have a Sub menu tab.
The fields here are the same as level 1, with one difference: any field you leave empty takes its setting from the main menu.
| Field in the app | Default for new menus |
|---|---|
| Text Color | #434343 |
| Text Size (px) | Empty: Default: 14px |
| Text Transform | Inherit (main menu) — follows level 1 |
| Font Weight | Inherit (main menu) — follows level 1 |
| Font Family | Empty — follows level 1 |
| Description Color | Empty: follows the submenu text color, with 0.6 opacity |
| Description Size (px) | Empty: about 80% of the submenu item name size |
When should you adjust this section? When you want the submenu text to be smaller and lighter than the main menu, so shoppers can tell the two levels apart at a glance. If you want the submenu text to look exactly like level 1, leave these fields empty.
Text Color for level 2–3
Where it is and what it’s for: 2 Design step › Sub menu tab › Text style › Text Color. This field changes the text color of the items inside the submenu panel.
How to choose: pick from the palette or type #RRGGBB. The default is #434343 (dark gray).
Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu; level 2–3 items; every platform. Icon Menu doesn’t have this field. No paid plan needed.
What shoppers see: the item names, the description lines (if you haven’t picked a separate color) and the links inside the submenu panel change color, and the × close button of the submenu panel changes with them too. The color of level 1 items isn’t affected.
Text Size for level 2–3
Where it is and what it’s for: 2 Design step › Sub menu tab › Text style › Text Size (px). This field changes the font size of level 2–3 item names.
How to choose: type a number in px, or choose a preset size. If empty, the field shows Default: 14px and the menu uses 14px. Note that an empty field doesn’t follow the level 1 size. It’s always 14px.
Applies to: the 5 menu types that have submenus (not Icon Menu); level 2–3 items; every platform. No paid plan needed.
What shoppers see: the text inside the submenu panel gets bigger or smaller. If you haven’t set a separate size for the description line, the submenu’s description line scales automatically, to about 80% of the item name size.
Text Transform for level 2–3
Where it is and what it’s for: 2 Design step › Sub menu tab › Text style › Text Transform. This field changes how the level 2–3 item name is capitalized.
Options: Inherit (main menu) follows level 1 (default) · None · Capitalize · UPPERCASE · lowercase. For what each option means, see the level 1 field.
Applies to: the 5 menu types that have submenus (not Icon Menu); level 2–3 items; every platform. No paid plan needed.
What shoppers see: if level 1 is in UPPERCASE but you want the submenu text to look normal, choose None here. If you leave it on Inherit, the submenu text is in UPPERCASE too, like level 1.
Font Weight for level 2–3
Where it is and what it’s for: 2 Design step › Sub menu tab › Text style › Font Weight. This field changes how bold the level 2–3 item name is.
Options: from Thin (100) to Heavy (900). Default Inherit (main menu): follows the weight of level 1.
Applies to: the 5 menu types that have submenus (not Icon Menu); level 2–3 items; every platform. No paid plan needed.
What shoppers see: the text in the submenu looks bolder or lighter, depending on your choice. To make the submenu lighter than level 1 so the two levels are easy to tell apart, choose a lower weight here.
Font Family for level 2–3
Where it is and what it’s for: 2 Design step › Sub menu tab › Text style › Font Family. This field sets a separate font for level 2–3 items.
Options: if empty, the submenu uses the same font as level 1 (default). Choose a Google font if you want the submenu in a different font. Use Default means the theme’s font.
Applies to: the 5 menu types that have submenus (not Icon Menu); level 2–3 items; every platform. No paid plan needed.
What shoppers see: only the text inside the submenu panel changes font. Level 1 items keep the old font.
Description Color for level 2–3
Where it is and what it’s for: 2 Design step › Sub menu tab › Text style › Description Color. This field changes the color of the small description line of level 2–3 items.
How to choose: pick from the palette or type #RRGGBB. If empty (the field shows Inherit (opacity 0.6)), the description line follows the submenu text color but is faded to 0.6 opacity.
Applies to: the 5 menu types that have submenus (not Icon Menu); level 2–3 items that have Sub text (Optional) filled in; every platform. No paid plan needed.
What shoppers see: the description line in the submenu changes to exactly the color you chose and is no longer faded.
Description Size for level 2–3
Where it is and what it’s for: 2 Design step › Sub menu tab › Text style › Description Size (px). This field changes the font size of the description line of level 2–3 items.
How to choose: type a number in px, or choose a preset size. If empty, the description line is calculated automatically from the item name size (about 80%).
Applies to: the 5 menu types that have submenus (not Icon Menu); level 2–3 items that have Sub text (Optional); every platform. No paid plan needed.
What shoppers see: the description line in the submenu gets bigger or smaller, and the item name doesn’t change.
Default comparison between level 1 and level 2–3
| Field | Level 1 | Level 2–3 |
|---|---|---|
| Text Color | #000000 |
#434343 |
| Text Size (px) | 11 (Tab Bar template); empty: 10 | Empty: 14 |
| Text Transform | Default (inherit) | Inherit (main menu) |
| Font Weight | Default (inherit) | Inherit (main menu) |
| Font Family | Use Default | Empty — follows level 1 |
| Description Color | Empty — text color at 0.6 opacity | Empty — text color at 0.6 opacity |
| Description Size (px) | Empty — 70% of text size | Empty — 80% of text size |
If you create a menu from a ready-made template, some fields may already be set to values different from the defaults above.