In the Configure step, you’ll see two sections: Divider, to set the default divider for the whole menu, and Google Icon Weight, to set the stroke weight of Google icons. Both work the same way for every menu type.
Set the default divider
The Divider box sets the default style for every divider line inside the menu. This covers items with a divider turned on, and separate Divider items you add as dividing lines. When you edit an individual menu item, you can still set its divider on its own. Any field you leave empty uses the default set here.
For submenus from level 2 down, you can set a separate divider color in the submenu design settings. If you haven’t set one, the submenu uses the color in this box.
| Field | What it does | Default |
|---|---|---|
| Color | Divider color | #EEEEEE |
| Size (px) | Thickness in pixels. Leave empty to inherit the default of 1px | Inherit (Default: 1) |
| Type | Line style: Solid, Dashed, Dotted or Double | Solid |
| Width | Divider length: Full, Inset or Under text | Full |
Color
In the Configure step, in the Divider box, the first field on the left. This is the default color for every divider in the menu.
- Options: pick a color from the palette or type a
#RRGGBBcode. - Default for a new menu:
#EEEEEE(very light gray). - Applies to: all 6 menu types, every level, every plan. For submenus from level 2 down, if you’ve set a divider color in the submenu design settings, that color takes priority. If not, the color in this field is used.
- What shoppers see: the dividers between items (items with Add divider turned on, and items of the Divider type) change to the new color. An item that has its own color set in Edit item keeps that color.
Size (px)
Next to the Color field, in the Divider box. This is the default thickness of the divider.
- Options: type a number of pixels, for example
2. You don’t need to typepx. - Default for a new menu: empty. The field shows
Inherit (Default: 1)and the divider is 1px thick. - Applies to: all 6 menu types, every level, every plan.
- What shoppers see: the bigger the number, the thicker the divider. An item with its own thickness in Edit item keeps that thickness.
Choose the line style
In the Type row, click one of four buttons to change the line style: Solid is a continuous line, Dashed is a dashed line, Dotted is a dotted line, and Double is two thin parallel lines.
Choose the divider length
| Option | How the divider shows on the menu |
|---|---|
| Full | Runs the full width of the menu item |
| Inset | Pulled in at both ends, not touching the edges |
| Under text | Starts at the edge of the text and sits right under it |
In a Desktop Mega Menu or Mobile Mega Menu, the dividers between level 1 items are vertical. The Double style doesn't support Inset on these vertical dividers.
Divider for an individual item
When you click an item in the tree at the Build Menu step, the Edit item panel opens. There you’ll find the Add divider checkbox. Tick it and four more fields appear below it: Size (px), Color, Type and Width. Use them to set the divider for this item only. Any field left at Inherit or empty uses the Divider box for the whole menu above.
These fields apply to every menu type, every level, on Shopify, Wix and other websites. The Add divider checkbox is available on Icon + image + text, Group title, Big image + text and Button items. A Line item (a divider you create yourself) is always a divider, so you don’t need to tick anything, and the four fields below also apply to it.
Add divider
In Edit item, on the same row as Add badge. Use it when you want a dividing line right after one specific item, instead of adding a separate Line item.
- Options: checkbox on or off.
- Default for a new menu: off.
- Applies to: all 6 menu types, every level, every plan. Only on Icon + image + text, Group title, Big image + text and Button items.
- What shoppers see: the item gets a dividing line before the next item. In Mobile Menu and submenus (from level 2), the line is horizontal at the bottom of the item. When level 1 items sit in a row (Tab Bar, Mega Menu…), the line is a vertical bar on the right edge of the item. Its style, color, thickness and length come from the Divider box of the menu, unless you change them in the fields below.
Size (px)
Appears when you tick Add divider. This is the thickness of the divider for this item only.
- Options: type a number of pixels, for example
2. - Default for a new menu: empty, which means it follows the Size (px) of the whole menu.
- Applies to: all 6 menu types, every plan. Only takes effect when Add divider is on.
- What shoppers see: the divider for this item is exactly the thickness you enter. Other items don’t change.
Color
Appears when you tick Add divider, next to the item’s Size (px) field.
- Options: pick a color from the palette or type a
#RRGGBBcode. - Default for a new menu: empty, which means it follows the Color of the whole menu.
- Applies to: all 6 menu types, every plan. Only takes effect when Add divider is on.
- What shoppers see: the divider for this item changes to the color you chose, even if the menu has a different default color.
Type
Appears when you tick Add divider. It’s a row of buttons showing the line styles. The first button, Inherit, means follow the menu.
- Options: Inherit (follow the menu), Solid (continuous), Dashed, Dotted, Double (two parallel lines).
- Default for a new menu: Inherit.
- Applies to: all 6 menu types. Requires the Business plan or higher: on the Starter plan this row is grayed out and shows the paid plan icon. Only takes effect when Add divider is on.
- What shoppers see: the divider for this item changes its line style. Other items keep the menu’s style. Double on the vertical bar of a level 1 Mega Menu can’t be shortened (see the note above).
Width
Appears when you tick Add divider, below the Type row.
- Options: Inherit (follow the menu), Full (full width of the item), Inset (pulled in at both ends), Under text (starts at the edge of the text).
- Default for a new menu: Inherit.
- Applies to: all 6 menu types. Requires the Business plan or higher. On the Starter plan the row is grayed out. Only takes effect when Add divider is on.
- What shoppers see: the divider for this item is longer or shorter than the others. On the vertical bar between level 1 items, both Inset and Under text shorten the bar and leave a little space at both ends.
Set the Google icon weight
The Google Icon Weight (BETA) field lets you set how thin or bold the Google Material Symbols icons look. These are the icons whose code starts with ms:. Regular icons and images you upload stay the same.
Click the list to pick a weight from 100 — Thin, 200 — Light, 300 (Default), 400 — Regular, 500, 600, up to 700 — Bold. The app sets it to 300 by default. Choose 100–200 for thin, elegant icon strokes, or 500–700 to make icons bolder and stand out more.
This feature is available from the Business plan up. On the Starter plan, the list is grayed out and an Upgrade → button appears next to it.
Quick summary
| Field in the app | Value | Default | Plan that includes it |
|---|---|---|---|
| Color | Color code | #EEEEEE |
All plans |
| Size (px) | Number of pixels | 1 | All plans |
| Type | Solid · Dashed · Dotted · Double | Solid | All plans |
| Width | Full · Inset · Under text | Full | All plans |
| Google Icon Weight | 100–700 | 300 |
Business and up |
Other platforms
The steps above are for Shopify — the default way.
The divider fields are exactly the same as on Shopify.
The divider fields are exactly the same as on Shopify.