Icon frame and inner box of an item

Each menu item can have two frame layers, and each layer has its own set of fields:

Frame around the icon or image — hugs the icon (or small image) of the item. In the Style block it is called Icon background, or Image frame if the item uses an image.
Box around the whole item (Inner box) — larger, wraps both the icon and the text of the item.

Inner boxBox around the icon and the text

Icon background / Image frameFrame hugging the icon or image

Icon / imageThe item's picture

Two frame layers of a menu item: the Inner box wraps the outside, and the icon frame sits inside it

Where to find these fields

On the Build Menu step, click an item to open Edit item, scroll down to the Style block, click Customize, then choose the card you need:

Card in Customize	Group	Fields
Icon background (an item with an image shows Image frame)	Common	Background color, Padding (px), Corner radius (px)
Icon background border & shadow	More	Border color, Border size, Shadow
Inner box	More	Background color, Border color, Border size, Corner radius (px), Shadow

‹ 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

A card you have not added yet means the item still follows the menu’s general style. For how to add, remove (✕) and copy a style to another item, see Item appearance and submenu style.

What all 11 fields have in common:

Default for a new menu: empty, which means no frame. On the form, the Padding and Corner radius fields show the hint “Default: 0”, and the Border size field shows “Default: 1”. These are only faded hints, not saved values.
Menu types: all 6 (Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu).
Levels: level 1 items and child items at level 2–3.
Item types: these cards only appear for Icon + image + text, Big image + text and Card items. Other types (Tab, Banner, Custom HTML, Line…) do not have them.
Plan: no field is locked by plan.

Frame around the icon or image

This is the frame placed right around the icon or the small image of the item. For example: an icon inside a blue round circle, or an image with rounded corners and a light shadow.

A few things to know before you change each field:

The item must have an icon or an image for the frame to show. An item with neither (and a layout other than text-only) does not get an empty frame on your store.
If the item layout is Text only (no icon), this frame wraps the text, like a colored label. Card items are the exception, because the card already has its own background.
If you fill in any one field (background color, corner radius, border or shadow) and leave Padding empty, your store uses 2 px of space around the icon so the frame shows as a proper box.
For an Image frame (item that uses an image), the card has no background color field, and the Icon background border & shadow card is also hidden. If the item already has values in those fields (for example, from when it used an icon), the fields still show so you can review and clear them.

Background color (icon or image frame)

Where: Edit item › Style › Icon background › Background color. Use it to fill the color behind the icon (or image).

Values: choose from the color picker or type a #RRGGBB code. Empty by default (no fill).
Applies to: 6 menu types, all levels, items Icon + image + text, Big image + text and Card. Does not depend on other fields. For an Image frame this field is hidden, unless the item already has a color.
What shoppers see: a colored square sits behind the icon. If the square looks too tight around the icon, increase the Padding so it has more room. When the item layout is Text only, this color fills the background behind the text. This is how you make white text stand out on a colored background, like a “Buy now” button.

Padding (px) (icon or image frame)

Where: Edit item › Style › Icon background › Padding (px). Use it to leave space between the icon and the edge of its frame.

Values: a number in px. You can enter 1, 2 or 4 numbers and set different values for mobile and desktop, the same way as other spacing fields — see How to enter numbers in spacing fields. Empty by default. If you have set a background, border, corner radius or shadow and leave this field empty, your store uses 2 px.
Applies to: same as the general section at the top of this page (6 menu types, all levels, 3 item types).
What shoppers see: the bigger the number, the larger the frame around the icon, so the icon looks like it sits inside a wide square. A value of 0 means the frame hugs the icon.

Corner radius (px) (icon or image frame)

Where: Edit item › Style › Icon background › Corner radius (px). Use it to round the corners of the icon frame, or to round the corners of a small image.

Values: a number in px, empty by default (square corners). The bigger the number, the rounder the corners. To make the frame a full circle, set a number larger than half of the frame’s side.
Applies to: same as the general section. For items that use an image, this field is inside the Image frame card.
What shoppers see: the corners of the frame become rounder. The image inside the frame is also cut to the rounded corners, so a square image can become a round one. When the item layout is Text only, only the frame around the text is rounded; the text is not cut.

Border color (icon or image frame)

Where: Edit item › Style › Icon background border & shadow › Border color. Use it to choose the color of the border of the icon frame.

Values: color picker or #RRGGBB, empty by default.
Applies to: same as the general section. For an Image frame, this whole card is hidden unless the item already has a value.
What shoppers see: the icon frame has a border in this color. If you choose a color but have not entered a Border size, the border is 1 px thick.

Border size (icon or image frame)

Where: Edit item › Style › Icon background border & shadow › Border size. Use it to choose how thick the border of the icon frame is, in px.

Values: a number in px, empty by default (no border); the hint shows “Default: 1”.
Applies to: same as the general section.
What shoppers see: the border of the icon frame gets thicker as the number increases. If you enter a thickness but have not chosen a Border color, the border is black.

Shadow (icon or image frame)

Where: Edit item › Style › Icon background border & shadow › Shadow. Use it to add a drop shadow to the icon frame.

Options: Not used (no shadow, default) · Light (tight, soft shadow) · Medium (medium shadow) · Strong (dark shadow spreading wide). There are only these 3 preset levels; you cannot type a custom value.
Applies to: same as the general section.
What shoppers see: the icon frame lifts off the background. The shadow is only clearly visible when the frame has a background color that differs from the item’s background, so set it together with Background color.

Box around the whole item (Inner box)

The Inner box is a large box that wraps both the icon and the text of an item, placed inside the background of the item. Use it when you want an item to look like a button or a pill with its own background, border and shadow, different from the background of the whole menu.

If the item is text-only, this box looks like it wraps the text.
For a Card item, the Inner box is the color band or text overlay of the card, so this card always shows in the Style block of a Card. When you set a solid color for this band without choosing a text color, the card text automatically switches to dark or light so it stays readable.
The space inside the box is set with the Padding field in the Style block, not in the Inner box card — see Item appearance and submenu style.

Background color (Inner box)

Where: Edit item › Style › Inner box › Background color. Use it to fill the background of the whole box around the item.

Values: color picker or #RRGGBB, empty by default.
Applies to: 6 menu types, all levels, items Icon + image + text, Big image + text and Card.
What shoppers see: the item has a colored block on top of the menu’s general background, and the text and icon sit on that block. This is different from Background (the background of the whole row or cell of the item), and different from the Background color of the icon frame, which only fills around the icon.

Border color (Inner box)

Where: Edit item › Style › Inner box › Border color. Use it to choose the color of the box border.

Values: color picker or #RRGGBB, empty by default.
Applies to: same as the general section of the Inner box.
What shoppers see: the box has a border in this color. If you choose a color but have not entered a Border size, the border is 1 px thick.

Border size (Inner box)

Where: Edit item › Style › Inner box › Border size. Use it to choose how thick the box border is, in px.

Values: a number in px, empty by default (no border); the hint shows “Default: 1”.
Applies to: same as the general section of the Inner box.
What shoppers see: the box border gets thicker as you enter a bigger number. If you have not chosen a Border color, the border is black.

Corner radius (px) (Inner box)

Where: Edit item › Style › Inner box › Corner radius (px). Use it to round the corners of the box.

Values: a number in px, empty by default (square corners).
Applies to: same as the general section of the Inner box.
What shoppers see: the box around the item has rounded corners. A large number gives a pill shape. The rounded corners only show when the box has a background or a border.

Shadow (Inner box)

Where: Edit item › Style › Inner box › Shadow. Use it to add a shadow to the box.

Options: Not used (default) · Light · Medium · Strong — the same 3 shadow levels as the shadow of the icon frame.
Applies to: same as the general section of the Inner box.
What shoppers see: the whole item lifts off the menu background like a small card. Set it together with Background color so the shadow is clearly visible.

Other platforms

The steps above are for Shopify — the default way.