When you click a menu item on the Build Menu step, the Edit item panel opens. Scroll down to the Style block to find the layout fields: how the icon and text are arranged, and the width and vertical position of that item.
Each field here only affects the item you have open. To change the layout for the whole menu, go to the Design step (see Style the main menu).
Where to find and turn on the layout fields?
In the Style block, each layout setting shows as its own card. At first, only the fields that differ from the default are shown.
If the field you need is not showing, click the Customize button, type the field name in the Search a setting… bar, then click it to add the card. To return a field to its default, click the ✕ on its card.
| Field | What it does | Default |
|---|---|---|
| Display layout | How the icon or image and the text are arranged in the item | Automatic |
| Width layout | The width of the item on its row | Automatic |
| Width fix (px) | A fixed width in px, when “Enter a fixed width” is chosen | Empty |
| Position | Pushes the item to the center, right or left, when using a fixed width or fitting to content | Automatic |
| Size (px) / Height (px) | The height of the item (Blank space, Card, Custom HTML) | Depends on type |
| Margin (px) | Space outside the item | 0 |
| Align | Aligns the content left, center or right | Automatic |
| Text position | Puts the text at the top, middle or bottom of the card (Card only) | Bottom |
Most of these fields are shared by all 6 menu types (Width layout and Width fix (px) are not available on Tab Bar and Floating Button). Which fields an item has depends on the item type you chose.
Arrange the icon and text (Display layout)
Display layout
In the Edit item panel, under the Style block, this is a row of small picture buttons. The Display layout field sets where the icon (or image) sits compared to the text in an item. Click a picture directly; hover over each one to see the name of the arrangement. The name of the chosen option shows next to the Display layout label.
| Option | What shows on the menu |
|---|---|
| Automatic | Uses the arrangement set for the whole menu |
| Top down | Icon on top, text below |
| Left right | Icon on the left, text on the right |
| Down top | Text on top, icon below |
| Right left | Text on the left, icon on the right |
| Icon/image only | Shows only the icon or image, hides the text |
| Text only | Shows only the text |
| Blank | Shows no content |
- Options: click one of the pictures in the table above, from Automatic to Blank.
- Default for a new menu: Automatic.
- Applies to: all 6 menu types, all levels, all plans. Only for Icon + image + text, Big image + text, Card and Tab items. Not available for Group title, Blank space, Line, Image banner or Custom HTML.
- What shoppers see: with Automatic, the item decides by its content: if it has an icon or image, it is arranged the way the menu is set; if it has no icon or image, it shows text only; an item with no text shows only the icon or image. For a Card with an icon or image, the icon goes on the left and the text on the right; a Card with no icon or image shows text only, whatever option you choose. When you choose a specific option, the item keeps that option and no longer changes automatically.
- When to change it: when you want one item to look different from the rest, for example the Cart item shows only the icon while the other items show both icon and text.
Change the width of an item (Width layout)
Width layout
In the Edit item panel, Style block. The Width layout field sets how much of the horizontal space on its row the item takes up.
| Option | How it works |
|---|---|
| Automatic | Stretches to fit the menu (default) |
| Grid 12 columns: 1/12 to 12/12 | The item takes n parts out of 12 parts of the row. Choose 12/12 (Full width) to make the item fill the whole row |
| Grid 10 columns: 1/10, 2/10, 5/10, 10/10 | The 10-part grid of the older version. Use the 12-column grid for new items |
| Enter a fixed width (px) | Sets a fixed width in px, typed in the Width fix (px) field |
| Hug content (Fit to content) | Shrinks just enough to fit the content inside |
- Options: one of the options in the table above (a selection box, or a grid of large cells for the columns of Desktop Mega Menu).
- Default for a new menu: Automatic.
- Applies to: Mobile Menu, Desktop Mega Menu, Mobile Mega Menu and Icon Menu, all plans. Tab Bar and Floating Button do not have this field.
- What shoppers see: with the 12- or 10-part grid, the item is exactly the percentage you chose (for example 6/12 is 50% of the row). With a fixed px number, the item is exactly that many px wide, and the other items on the same row share the rest equally. With Hug content, the item shrinks to fit its content. With Automatic, a level 1 item in a Mega Menu also shrinks to fit its content (like Hug content); in other menus, the item stretches to fit the menu.
- When to change it: when you want to split a row into items of different widths, for example two items at 6/12 each, or a 4/12 item next to an 8/12 item.
- How items on the same row add up: the widths of the items on one row should add up to 12/12. For example, 3/12 + 3/12 + 3/12 + 3/12 makes four equal columns.
- For Desktop Mega Menu columns: the selection shows as a grid of large cells (12-column grid, 10-column grid (legacy), Other…) with a More… button to open more ratios. Use the 12-column grid. The Automatic, 10-column, fixed-width and Hug options can make the columns jump around (see Columns, dividers and pinned items).
- Available for item types: Icon + image + text, Big image + text, Blank space, Button, Image banner, Card and Custom HTML. Not available for Group title, Line or Tab.
Set a fixed width and vertical position (Width fix, Position)
These two fields are normally hidden. They only appear when the choice in Width layout needs them.
Width fix (px)
Appears right next to Width layout when you choose Enter a fixed width. Type the number of px you want into the field, for example 120.
- Options: a number in px. You don’t need to type
px. - Default for a new menu: empty.
- Applies to: the same menu types and item types as Width layout (Mobile Menu, both Mega Menus, Icon Menu). It only has an effect when Width layout is set to Enter a fixed width.
- What shoppers see: the item is exactly the px width you typed. If this field is empty, the item has no fixed width and is handled as Automatic.
Position appears when you choose Enter a fixed width or Hug content. Because the item is then usually narrower than the row, you can choose Automatic, Float to center, Float to right or Float to left to push the item toward the side you want.
When you change Width layout to another option (the 12-column grid, the 10-column grid or Automatic), these two fields hide themselves.
Change the height of an item (Height, Size)
Size / Height (px)
In the Edit item panel, Style block. This field sits in the same place, but its name changes with the item type you have open:
| Item type | Field name | How it works |
|---|---|---|
| Blank space | Size (px) | The height of the empty space |
| Card | Height (px) | The height of the card |
| Custom HTML | Height (px) | The height of the HTML box; if empty, the box grows to fit its content |
Other item types do not have this field.
- Options: a number in px. You don’t need to type
px. - Default for a new menu: empty. An empty Card is 200px high; an empty Custom HTML box is as tall as its content.
- Applies to: all 6 menu types, all plans. Only for Blank space, Custom HTML and Card items.
- What shoppers see: the empty space, card or HTML block is exactly the px height you typed. For Blank space placed in a level 1 row (Tab Bar, Floating Button, Icon Menu, Mega Menus), this number is the width of the space, not its height, and the other items share the rest of the row. In a Mobile Menu (vertical list), it is the height as usual.
Position the text on a Card (Text position)
For a Card item, you will see an extra field, Text position, right under Height (px). It lets you place the text at the Top, Middle or Bottom (default) of the card.
Create space outside an item (Margin)
The Margin (px) field creates space outside the edge of the item, to push the neighboring items away (default 0). Type the numbers in the order shown in the field: top right bottom left.
- Available for item types: most item types, except Blank space, Line, Tab and automatic items.
- To change the space inside an item (Padding), see Item appearance and submenu style.
Align the content inside an item (Align)
The Align field aligns the content inside the item to the left, center or right. The default is Automatic (follows the setting of the whole menu).
- Available for item types: Icon + image + text, Big image + text, Card. Not available for Group title, Blank space, Line, Tab, Image banner or Custom HTML.
- For a Card, Align sets the horizontal alignment. To align vertically, use the Text position field above.
Scroll direction
This field appears only when the item has a submenu. The default is Automatic (child items stack vertically). Choose Horizontal to place the child items of this item on one row, which the shopper swipes or scrolls sideways to see all of them.
- Options: Automatic, Horizontal.
- Default for a new menu: Automatic.
- Applies to: Mobile Menu, Desktop Mega Menu and Mobile Mega Menu, at level 1 and level 2 items (Icon + image + text, Group title, Image banner, Tab).
- What shoppers see: the child items scroll sideways instead of stacking vertically.
Split a submenu into columns (Desktop Mega Menu)
These two fields are only available for level 1 items of the Desktop Mega Menu, in the same Edit item panel. For how to split the columns and choose their widths, see Columns, dividers and pinned items.
Multi-column layout
A separate card in Edit item. When collapsed, it shows the text Single-column or Multi-column with a small picture. Click the card to open the Split menu into columns checkbox.
- Options: a checkbox, on or off.
- Default for a new menu: off (Single-column).
- Applies to: Desktop Mega Menu only, level 1 items of type Icon + image + text, Big image + text or Button. All plans.
- What shoppers see: when on, hovering over this item opens a wide panel, where each level 2 item is a column and the level 3 items sit inside that column. When off, the submenu is a normal list. The text of the items that act as columns is only for you to tell them apart in the app; it does not show on your store.
Multi-column submenu width (px)
Appears right under the Split menu into columns checkbox, only when that checkbox is on.
- Options: a number in px, for example
1200. If empty, the field showsInherit from Setting. - Default for a new menu: empty.
- Applies to: Desktop Mega Menu only, level 1 items with Multi-column layout on. All plans.
- What shoppers see: the multi-column panel of this item is exactly the px width you typed. If it is empty, the panel uses the general maximum width of the menu (Display on desktop › Multi-column submenu › Max width); if that is also empty, the panel spans the full width of the screen, and the columns inside are at most 1440px wide and centered.
Which item types have which layout fields?
| Item type | Display layout | Width layout | Height | Align | Margin |
|---|---|---|---|---|---|
| Icon + image + text | ✓ | ✓ | ✓ | ✓ | |
| Big image + text | ✓ | ✓ | ✓ | ✓ | |
| Group title | ✓ | ||||
| Blank space | ✓ | ✓ | |||
| Line | |||||
| Tab | ✓ | ||||
| Image banner | ✓ | ✓ | |||
| Card | ✓ | ✓ | ✓ | ✓ | ✓ |
| Custom HTML | ✓ | ✓ | ✓ |
Other platforms
The steps above are for Shopify — the default way.
The layout fields are identical to Shopify.
The layout fields are identical to Shopify.