The menu container is the background area around the menu items, for example the Tab Bar strip or the list panel that opens when a shopper taps an item.
You change this frame in the Design step, in the Main menu container block of the Main menu card and the Sub menu container block of the Sub menu card. To change the inner and outer spacing such as margin or padding, see Inner and outer spacing. The fields below are the same on Shopify, Wix and every other website.
Change the height of the menu bar
Go to the Main menu card › Main menu container › Layout.
| Field in the app | What it does | Default for a new menu |
|---|---|---|
| Menu height (px) | Sets the height of the menu bar. | 50 |
| Min height (px) | Keeps a minimum height so the menu bar never shrinks below this value. | Empty: Inherit (px) |
The Menu height (px) field is available on Tab Bar, Floating Button, Desktop Mega Menu, Mobile Mega Menu and Icon Menu. The Min height (px) field is also available on these menus, except Icon Menu. Mobile Menu has no Layout block, because its level 1 list already fills the menu container.
When to change it: if the Tab Bar is so tall that it covers part of the page content, lower Menu height (px). If you want shoppers to tap more comfortably, increase this number.
Change the background, shadow and corners of the main menu frame
Go to the Main menu card › Main menu container, then scroll down to the Background (BG), Shadow and Others blocks. All 6 menu types have this section, except for a few differences noted at the end of this part.
Background (BG) block
| Field in the app | What it does | Default for a new menu |
|---|---|---|
| Is Transparent | Makes the menu background transparent so the page behind shows through. When you turn this on, the color and image fields are temporarily hidden, but their values are kept; turning it off shows them again. | Off |
| BG Color | Changes the background color. The color picker has a transparency slider if you want a slightly see-through background. | #FFFFFF |
| BG Image | Uses an image as the background. Click Select to choose an image from the library, or click × to remove the image in use. After you choose an image, the Opacity slider appears so you can adjust how strong the image is. | Empty |
Shadow block
| Field in the app | What it does | Default for a new menu |
|---|---|---|
| Apply drop shadow | Adds a shadow around the frame so the menu stands out from the page. Drop shadows suit the Tab Bar, floating buttons and dropdown menus very well. | On |
Others block
| Field in the app | What it does | Default for a new menu |
|---|---|---|
| Curve (px) | Rounds the corners of the menu frame. Click the field to pick a preset level, or type your own number: 0 is square corners, 500 rounds both ends fully. |
0 |
| Badge color | Changes the background color of the badge labels on menu items. To see how to add a badge, read Icon, image and badges. | #FF0000 |
| Hide all texts | Hides all item names on the menu bar, keeping only the icons. | Off |
Differences between menu types:
- Icon Menu has no Background (BG) block.
- Mobile Menu has no Is Transparent switch, but you can still change BG Color and BG Image.
- The Hide all texts switch is only on Tab Bar and Floating Button.
When to change them:
- To match the menu to your brand color: change the color in BG Color, or change the whole color set at once with the Palette feature.
- To make the Tab Bar look compact and stand out from the page: increase Curve (px) to round the corners, and turn on Apply drop shadow.
- To make the menu as minimal as possible: turn on Hide all texts so only the row of icons shows.
Menu height (px)
This field is in the Design step › Main menu card › Main menu container › Layout block. It sets the height of each level 1 item, so the menu bar gets taller or shorter with the number you enter.
- Unit: px. Type a number.
- Default: the field shows 50 when the menu has no value of its own. Menus created from a template or from the menu builder have their own value by type, for example Desktop Mega Menu 40, Floating Button 52, Icon Menu 80.
- Applies to: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Mega Menu and Icon Menu, at level 1. Mobile Menu does not have this field.
- Plan: no special plan needed.
- On your store: on the Tab Bar, this number is the height of the bar; a bigger number makes it easier to tap, but the bar covers more page content. On a Floating Button, the round button gets bigger or smaller with this number. On Desktop Mega Menu and Mobile Mega Menu, this number is also the minimum height of the whole menu strip.
- Wix and other websites: same as Shopify.
Min height (px)
This field sits right under Menu height (px), in the Layout block of the Main menu container. It sets the minimum height of each level 1 item, which helps when the items have different content heights but you want them to be the same height.
- Unit: px. If empty, the field shows Inherit (px), which means no minimum is forced.
- Default: empty.
- Applies to: Tab Bar, Floating Button, Desktop Mega Menu and Mobile Mega Menu. Mobile Menu and Icon Menu do not have this field.
- Plan: no special plan needed.
- On your store: each level 1 item is never shorter than the number you enter. A number smaller than the item’s actual height makes no visible difference.
- Wix and other websites: same as Shopify.
Is Transparent (Main menu Background block)
This field is in Design › Main menu › Main menu container › Background (BG) block. When on, the main menu frame has no background, so the shopper can see the part of the page behind the menu. This style suits placing the menu over a banner image at the top of the page.
- Options: a switch, On / Off. Default Off.
- Applies to: Tab Bar, Floating Button, Desktop Mega Menu and Mobile Mega Menu. Mobile Menu has no this switch, and Icon Menu has no Background (BG) block at all.
- Plan: no special plan needed.
- On your store: when on, the menu drops its BG Color, BG Image and the frame’s drop shadow, even if Apply drop shadow is still on. The color and image fields are hidden in the app, but their old values are kept; turning the switch off restores the background as before.
- Wix and other websites: same as Shopify.
BG Color
This field is in the Background (BG) block of the Main menu container. It changes the background color of the main menu frame.
- Options: click the field to choose a color, or type a
#RRGGBBcode. The color picker has a transparency slider if you want a slightly see-through background. - Default:
#FFFFFF(white). - Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Icon Menu does not have this field. On Mobile Menu, this color is the background of the whole drawer.
- Plan: no special plan needed.
- Only shown when: the Is Transparent switch is off.
- On your store: the background of the menu frame changes to the color you choose. If you also set a BG Image, this color sits under the image and shows through when you lower the image’s Opacity.
- Wix and other websites: same as Shopify.
BG Image
This field is in the Background (BG) block of the Main menu container. It uses a picture as the background of the menu frame.
- How to use: click Select to choose an image from the library, click × to remove the image. After you choose an image, the Opacity slider appears.
- Default: empty.
- Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Icon Menu does not have this field.
- Plan: no special plan needed.
- Only shown when: the Is Transparent switch is off.
- On your store: the image covers the whole menu frame and resizes to fit. Lowering the Opacity makes the image fade as the BG Color covers more of it, so choose a background color that suits the image.
- Wix and other websites: same as Shopify.
Apply drop shadow (Main menu Shadow block)
This field is in Design › Main menu › Main menu container › Shadow block. When on, the menu frame has a soft shadow around its edge, so the menu lifts off the page.
- Options: a switch, On / Off. Default On.
- Applies to: all 6 menu types. The drop shadow suits the Tab Bar, Floating Button and dropdown menus best.
- Plan: no special plan needed.
- On your store: when off, the menu frame is flat, with no shadow. If Is Transparent is on, the menu frame has no shadow even when this field is on.
- Wix and other websites: same as Shopify.
Curve (px) (Main menu Others block)
This field is in the Others block of the Main menu container. It rounds the corners of the menu frame.
- Unit: px. Click the field to pick a preset level, or type your own number:
0is square corners,500rounds both ends fully. - Default:
0. - Applies to: all 6 menu types.
- Plan: no special plan needed.
- On your store: the corners of the menu frame get rounder as the number increases, and the submenu panels opened from this menu round to the same level. To give the submenu panels their own rounding, set the Curve (px) field of the Sub menu card.
- Wix and other websites: same as Shopify.
Badge color
This field is in the Others block of the Main menu container. It changes the color of the badge dot on an item’s icon or image. To add a badge to each item, read Icon, image and badges.
- Options: choose a color or type a
#RRGGBBcode. - Default:
#FF0000(red). - Applies to: all 6 menu types, on every item that has a badge turned on.
- Plan: no special plan needed.
- On your store: every badge dot in the menu changes to this color. The color applies to the whole menu; you cannot set it for each item.
- Wix and other websites: same as Shopify.
Hide all texts
This field is in the Others block of the Main menu container. When on, the menu bar shows only icons: item names and descriptions below them are hidden.
- Options: a switch, On / Off. Default Off.
- Applies to: only Tab Bar and Floating Button, at level 1.
- Plan: no special plan needed.
- On your store: shoppers see only the row of icons, so every item needs an icon so shoppers know where to tap. The text is not deleted; turn the switch off and the item names show again.
- Wix and other websites: same as Shopify.
Change the container of the submenu panels
Go to the Sub menu card › Sub menu container. It also has 3 blocks: Background (BG), Shadow and Others. This section is available on Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Icon Menu does not have a Sub menu card.
| Field in the app | What it does | Default for a new menu |
|---|---|---|
| Is Transparent | Makes the background of the submenu panel transparent. | Off |
| BG Color | Changes the background color of the submenu panel. | #fafafa |
| Apply drop shadow | Adds a shadow around the submenu panel. | On |
| Min height (px) | Sets a minimum height for the submenu panel. | Empty: Inherit (px) |
| Curve (px) | Rounds the corners of the submenu panel. | Empty |
| Divider color | Changes the color of the divider lines between the child items in a list. | #EEEEEE |
Differences between menu types: the submenu panel has no background image field, and Mobile Menu has neither the Is Transparent switch nor Apply drop shadow.
When to change it: when you want the submenu panel to stand out more, or to blend into the color of your website, change BG Color and turn Apply drop shadow on or off. If the lines between rows look too strong or too faint, adjust the color in Divider color.
Is Transparent (Sub menu card)
This field is in Design › Sub menu › Sub menu container › Background (BG) block. When on, the submenu panel has no background, and the shopper can see the page behind it.
- Options: a switch, On / Off. Default Off.
- Applies to: Tab Bar, Floating Button, Desktop Mega Menu and Mobile Mega Menu. Mobile Menu does not have this switch.
- Plan: no special plan needed.
- On your store: the submenu panel drops its background and drop shadow. The pointed arrow on the submenu (if any) also hides. The text of the submenu keeps the color you set, so choose a text color that is clear on the page behind it.
- Wix and other websites: same as Shopify.
BG Color (Sub menu card)
This field is in the Background (BG) block of the Sub menu container. It changes the background color of the submenu panel (level 2 and level 3).
- Options: click the field to choose a color, or type
#RRGGBB. - Default:
#FAFAFA(off-white). - Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Icon Menu does not have a Sub menu card.
- Plan: no special plan needed.
- Only shown when: the Is Transparent switch of the Sub menu is off.
- On your store: the background of the submenu panel changes color; the background of the main menu does not change.
- Wix and other websites: same as Shopify.
Apply drop shadow (Sub menu card)
This field is in Design › Sub menu › Sub menu container › Shadow block. When on, the submenu panel has a shadow around its edge, so it stands apart from the page.
- Options: a switch, On / Off. Default On.
- Applies to: Tab Bar, Floating Button, Desktop Mega Menu and Mobile Mega Menu. Mobile Menu does not have this field.
- Plan: no special plan needed.
- On your store: when off, the submenu panel is flat, with no shadow. The shadow of the submenu panel is separate from the shadow of the main menu frame. If the Sub menu’s Is Transparent is on, the submenu panel has no shadow.
- Wix and other websites: same as Shopify.
Min height (px) (Sub menu card)
This field is in the Others block of the Sub menu container. It sets the minimum height of each row in the submenu panel.
- Unit: px. If empty, the field shows Inherit (px).
- Default: empty.
- Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu.
- Plan: no special plan needed.
- On your store: each row at level 2 and level 3 is never shorter than the number you enter, so the list looks more open and is easier to tap on a phone.
- Wix and other websites: same as Shopify.
Curve (px) (Sub menu card)
This field is in the Others block of the Sub menu container. It rounds the corners of the submenu panel.
- Unit: px.
- Default: empty. When empty, the submenu panel rounds its corners to the level set in the Curve (px) field of the Main menu.
- Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu.
- Plan: no special plan needed.
- On your store: the submenu panel rounds its corners to the number you enter.
- Wix and other websites: same as Shopify.
Divider color
This field is in the Others block of the Sub menu container. It changes the color of the divider lines between child items.
- Options: choose a color or type
#RRGGBB. - Default:
#EEEEEE(light gray). - Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu, at level 2 and level 3. Icon Menu does not have a Sub menu card.
- Plan: no special plan needed.
- On your store: the divider lines between rows in the submenu panel change color. If you leave this field empty, the divider lines take the color of the general divider of the main menu. A divider color set on an item itself takes priority over both.
- Wix and other websites: same as Shopify.
Quick table
| Field in the app | Main frame | Sub frame | Menu type |
|---|---|---|---|
| Menu height (px) | Yes | No | Not on Mobile Menu |
| Min height (px) | Yes | Yes | Main frame: not on Icon Menu and Mobile Menu |
| Is Transparent | Yes | Yes | Not on Mobile Menu; main frame also not on Icon Menu |
| BG Color | Yes | Yes | Main frame: not on Icon Menu |
| BG Image | Yes | No | Not on Icon Menu |
| Apply drop shadow | Yes | Yes | Sub frame: not on Mobile Menu |
| Curve (px) | Yes | Yes | All |
| Badge color | Yes | No | All |
| Hide all texts | Yes | No | Only on Tab Bar and Floating Button |
| Divider color | No | Yes | All, except Icon Menu |