Item appearance and submenu style

On the Build Menu step, click a menu item to open the Edit item panel. Scroll down to the Style block if you want to change the text color, icon, image, background, border or spacing of this item only. If the item has child items inside it, the Submenu section lets you change the look of the submenu panel that opens from it.

When does an item follow the general style, and when does it get its own?

By default, every menu item follows the general style of the whole menu that you set in the Design step. When an item has no custom changes, the Style block shows the line Follows the menu’s style. An item gets its own style only when you add a setting to this block and turn it on.

Design step: the menu's general style

Item follows the general style

Customize: a field overrides the general style

How to use the Style block:

Click Customize to add the settings you want to change for this item. You can type in the Search a setting… box, or pick from two groups: Common (most used) and More (expanded).
Each setting that has its own value shows as a card in the Style block, with a summary of that value. The top of the block also shows the total number of changed cards, for example “2 customized”.
Each card shows where the item inherits its base style from: Menu, Level 1, Submenu (level 2–3) or Default. If the source is unclear, the card shows Inherits menu style.
To remove the custom style of a field and return to the menu’s general style, click the ✕ (Reset to inherit) on that card.

‹ BackEdit item

ORUpload small image (as icon)jpg, png, svg, webp…

Basic info

TextLanguage T-shirts

Link to Auto-clean URLLanguage collections/ao-thun

Add dividerAdd badge

Sub text (optional)Language E.g. Free shipping over $50

Layout

Display layoutAUTOICON + TEXTTEXT ▸IMAGETEXT ONLY

Width layoutAutomatic

Style

Follows the menu's styleCustomizeStyle block

Visibility

Showing under all conditionsEdit rules

Submenu

Advanced

Settings you can add from the Customize button:

Group	Setting	What it does
Common	Text	Change the Text color and Text size of the item
Common	Icon	Change the Icon color and Icon size
Common	Icon background (shows as Image frame if the item uses an image)	Change the shape of the background, the corner radius and the space around the icon or image
Common	Background	Set a background color or background image for the whole item
Common	Padding	Change the space inside the item
Common	Divider	Add a line under the item
Common	Badge	Add a dot badge or show the cart count
Common	Align	Align left, center or right
More	Icon background border & shadow	Add a border and shadow to the icon background
More	Inner box	Create a separate box around the text, with its own color and border
More	Display layout, Width layout, Margin	Change the layout and outer margin — see Item layout — display, width, position
More	Image ratio	Crop the image to a ratio
More	Animation, Class names, CSS & attributes	Add an effect or custom code — see Animation, class, CSS and attributes
More	Submenu panel style	Change the style of the submenu panel (background color, background image, animation), see the last section of this page

You can find step-by-step guides for Divider and Badge in Columns, dividers and pinned items and Icon, image and badges.

The Style block applies to all 6 menu types. However, each item type has only some of these settings. See Menu item types for details.

Change the text color and text size

Use these when you want to highlight one specific item, for example to make the text of the Sale item red. The two fields are in the Text card of the Style block.

Text color

Where: Build Menu → click the item → Edit item → Style block → Customize → Text → Text color field.
What it does: changes the text color of this item only, overriding the general text color of the menu.
Values: choose from the color picker or type a #RRGGBB code. In a new menu the field is empty (shows Inherit), so the item uses the menu’s general color.
Applies to: all 6 menu types, all levels. Item types: Icon + image + text, Big image + text, Group title, Tab and Card. Not available for Line, Blank space, Image banner and Custom HTML. No special plan needed.
What shoppers see: the text of this item only changes color; other items stay the same. To go back to the general color, click ✕ (Reset to inherit) on the card.

Text size (px)

Where: same Text card, Text size (px) field next to Text color.
What it does: sets a separate text size for this item.
Values: numbers only, in px (for example 16). Leave empty (Inherit) to use the menu’s general text size.
Applies to: same as Text color: 6 menu types, all levels, item types that have text (Icon + image + text, Big image + text, Group title, Tab, Card). No special plan needed.
What shoppers see: the text of this item is larger or smaller than the items around it. If the item has an icon, check the Icon size so it matches the text.

Line and Blank space items do not have this field.

Change the icon color and size

These two fields are in the Icon card of the Style block. This part is not available for Group title items. To choose an icon or upload an image for the item, see Icon, image and badges.

Icon color

Where: Build Menu → click the item → Edit item → Style block → Customize → Icon → Icon color field.
What it does: changes the icon color of this item only.
Values: choose from the color picker or type #RRGGBB. Leave empty (Inherit) so the icon uses the menu’s general color. This is also the value of a new menu.
Applies to: all 6 menu types, all levels. Item types: Icon + image + text, Tab and Card. Not available for Big image + text, Group title, Line, Blank space and Image banner. No special plan needed.
What shoppers see: the icon of this item changes color; the text does not change (text is set in Text color).

Icon size (px)

Where: same Icon card, Icon size (px) field.
What it does: sets a separate size for the icon or small image of this item.
Values: a number in px. Leave empty (Inherit) to use the menu’s general icon size.
Applies to: same group as Icon color: 6 menu types, all levels, item types Icon + image + text, Tab and Card. No special plan needed.
What shoppers see: the icon (or small image) of this item is larger or smaller than the other items.

Crop the image to a ratio

The Image ratio field lets you crop an image frame inside the menu, without editing the image and uploading it again.

Image ratio

Where: Build Menu → click the item → Edit item → Style block → Customize → More group → Image ratio. The field shows as a row of 5 small pictures for you to click.
What it does: automatically crops the large image or banner of this item to a fixed frame ratio.
Options: Inherit (follows the menu; the value of a new menu), Unchanged (keeps the original image ratio), 3:2 (landscape), 2:3 (portrait), 1:1 (square).
Applies to: all 6 menu types, all levels. Only for Big image + text and Image banner items. No special plan needed.
What shoppers see: the image is cropped by zooming it to fill the frame (the extra edges are cut off, the image is not stretched), and it fills the whole space that holds it. Choose Unchanged to keep the original ratio. Cropping happens only when the page is shown; your image file is not changed.

Create a frame around an icon or image

When you want an icon or image to sit inside a round or rounded-corner box, use the Outer box group. In the Style block it shows as Icon background for an icon, or Image frame for an image.

This group is available for Icon + image + text, Big image + text and Card items. It has these fields:

Field	Default
Background color	Empty
Padding (px)	0
Border color	Empty
Border size	1
Corner radius (px)	0
Shadow	Not used (other shadow levels: Light, Medium, Strong)

Change the item background and inner box

Background (in the older interface called Outer) sets the background of the whole item. For a Card item, this field is moved to the top of the panel, because the background is the card body itself. The two background fields are in the Background card of the Style block.

Background color

Where: Build Menu → click the item → Edit item → Style block → Customize → Background → Background color field.
What it does: fills a color behind the whole item (the icon area, the text and the space around them).
Values: choose from the color picker or type #RRGGBB. In a new menu it is empty, so the item has no background of its own.
Applies to: all 6 menu types, all levels. Item types: Icon + image + text, Group title, Blank space, Big image + text, Tab and Card. Not available for Line, Image banner and Custom HTML. No special plan needed.
What shoppers see: a block of color behind the item. For Card, if you leave it empty and the card has no image, the card shows a default light gray background; when the card has an image, the image stands alone and is not covered by that gray.
Works with: if you also set a Background image, this color is the color that blends in when you lower the image opacity.

Background image

Where: same Background card, Background image field. Paste the image path or click Select to pick from the library; click ✕ next to the field to remove the image.
What it does: sets an image behind the whole item. For a Card item, this is the image of the card.
Values: empty for a new menu. When an image is set, the Background Image opacity (%) field appears so you can adjust its transparency.
Applies to: same as Background color — 6 menu types, all levels, item types Icon + image + text, Group title, Blank space, Big image + text, Tab and Card. No special plan needed.
What shoppers see: the image covers the whole background of the item. At 100% opacity the image shows fully; lower numbers fade the image toward the background color (the color in Background color, or the menu’s general background color if that field is empty).
Tip: choose an image whose text area is dark enough or light enough. If the text is hard to read, lower the image opacity or change the Text color.

Inner box (in the older interface called Inner) creates a box around the text, with these fields: Background color, Padding (px) (default 0), Border color, Border size (default 1), Corner radius (px) (default 0) and Shadow.

The Inner box is available only for Icon + image + text, Big image + text and Card items. For Blank space items, only Background is available.

Space inside the item

Padding (px)

Where: Build Menu → click the item → Edit item → Style block → Customize → Padding. Click the field to open a panel where you set all four sides.
What it does: leaves space inside the item, between its edge and its content (icon, text).
Values: type one number for all four sides (12), two numbers for top-bottom and left-right (12 20), or three or four numbers in the order top, right, bottom, left. You only type numbers; the unit is px. To use different values on mobile and desktop, untick Same as mobile and type the Desktop values separately. The value is stored as mobile|desktop, for example 8|16. A new menu leaves it empty, and the hint shows Default: 0.
Applies to: all 6 menu types, all levels, all item types that show on the menu. No special plan needed.
What shoppers see: the content of the item moves inward, and the item looks bigger and more open. If you use a divider in Inset or Under text style (see Default divider and icon weight), the divider moves in by the same left and right padding of the item. For a level 1 item with a dropdown submenu, padding or margin at the top moves the arrow and the submenu panel with it, so the raised item still sits on top of its submenu.
Different from: the padding of the frame around an icon (see Create a frame around an icon or image) and the padding of the Inner box. Those two fields only leave room around the icon or around the text.

Copy a style from one item to another

When several items should share the same custom look, you don’t need to set each field again. Click the … button (More actions) at the top of the Style block:

Open the item you have finished styling and choose Copy style. The app shows Style copied.
Open another item of the same type and choose Paste style. The app shows Style pasted.
Click Save to keep the change. Pasting only fills in the values in the panel; it does not save them automatically.

A few things to know when you copy and paste a style:

You can only paste between two items of the same type. If you paste into an item of a different type, the app shows Cannot paste: item kind is different.
Any field that is empty on the source item (so it follows the menu’s general style) does not remove the custom style that the target item already has.
All colors, sizes, backgrounds, borders, layout, animation, class and CSS of the source item are copied.

Change the look of an item’s submenu panel

The Submenu section (or Submenu panel style in the Customize button) changes the submenu panel that opens when a shopper taps this item. This section appears only when the item has child items inside it.

When to use it: when you want each parent item to open a submenu panel with its own look, for example a separate background image for the Men item and the Women item.
Menu types that support it: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Not available for Icon Menu.
Item types that support it: Icon + image + text and Big image + text. Not available for Group title, Tab, Banner, Card, Custom HTML, Blank space and Line.
The three fields below also apply to multi-column panels (Multi-column layout), not only to normal panels.
To change the general style of all submenu panels at once, use the Design step — see Style submenus.

Background color (submenu panel)

Where: Build Menu → click the parent item → Edit item → Style block → Customize → Submenu panel style (or the Submenu section) → Background → Background color field.
What it does: changes the background color of the submenu panel that this item opens, for this panel only.
Values: choose from the color picker or type #RRGGBB. A new menu leaves it empty (Inherit), so the submenu uses the general submenu background color set in the Design step.
Applies to: the 5 menu types above, only when the item has a submenu. No special plan needed.
What shoppers see: the submenu of this item has its own color; the panels of other items keep the general color. With the Dropdown style, the pointed arrow on the submenu also changes to this color, so it does not look mismatched.
Note: if you also set a background image, the arrow only takes the color and cannot follow the image.

Background image (submenu panel)

Where: same Background card of the Submenu section, Background image field: paste the image path or click Select, click ✕ to remove.
What it does: sets a background image for the submenu panel of this item.
Values: empty for a new menu. When an image is set, the opacity field appears so you can adjust it.
Applies to: same as the background color above — 5 menu types, items with a submenu, item types Icon + image + text and Big image + text. No special plan needed.
What shoppers see: the image covers the whole submenu panel. Lower the opacity and the image fades toward the panel background color (color field above, or the general submenu color if it is empty), which makes the text easier to read.

Animation

Where: Submenu section → Animation card → Animation field. Next to it is a Demo link that opens a page where you can preview the effects.
What it does: chooses the effect that plays when the submenu panel of this item opens.
Values: a list of effects grouped by category, with the Popular group at the top (bounce, flash, pulse, tada…). A new menu uses Inherit, which means no separate effect is set and the panel uses the general menu effect.
Applies to: the 5 menu types above, only when the item has a submenu. Item types Icon + image + text and Big image + text. No special plan needed.
What shoppers see: each time the submenu of this item opens, the effect you chose plays. This is the effect of the submenu panel, different from the Animation of the item itself (see Animation, class, CSS and attributes).