Mobile menu
The mobile menu is the menu that slides in from the side when a customer taps the menu button on mobile. The entire menu is controlled from the theme settings – there is no separate block you drag in. Here you set colors, text transformation, and which sections should be displayed.
You can find the settings here:
- Click the "Theme settings" dropdown menu at the top
- Click the "Theme settings" option
- Select "Mobile menu" in the left menu
Colors
The colors in the mobile menu are set in layers: one set controls the panel itself and the general text, another controls the links, and a third controls the link the customer is currently on. This allows you to make the category links stand out from the rest.
Setting | What it controls |
|---|---|
Menu background color | The background of the entire menu panel |
Text color on the mobile menu | All regular text and icons in the menu – including the "MENU" title at the top |
Link color in the mobile menu | The menu links themselves: categories, static pages, and similar |
Choose colors that have good contrast against the background, so that the text is easy to read.
"MENU" title at the top
At the top of the menu, the title "MENU" appears in large, bold font. It has no separate color setting – the color follows "Text color on the mobile menu". If you change the text color, the title changes along with the rest of the text.
Two things are worth knowing:
- The word "MENU" itself is a fixed system text. You control its color, but not the text itself from the theme settings.
- The title is affected not by "Menu text transformation" (see below). It is always bold and large regardless of your selection there.
Mobile menu text transformation
Controls how the text in the menu links is displayed:
- Uppercase (UPPERCASE LETTERS)
- Lowercase (lowercase letters)
- Capitalize (First Letter Capitalized)
- None (no change)
- Inherit (inherits setting from elsewhere)
This applies to the links in the menu, not the "MENU" title at the top.
Advanced settings
These are hidden behind "Advanced mode" and provide finer control over the links.
Background for links in the mobile menu
The background color behind each individual menu link. Use it if you want the links to have a different background than the rest of the panel.
Background for active link in the mobile menu
The background color of the link the customer is currently on. Make it clear where in the menu one is.
Text color for active link in the mobile menu
The text color of the active link. Choose a color that contrasts well with the background for the active link.
Show static pages on the mobile menu
Shows static pages (from CMS) that are set up in "Main menu/content" section of the control panel.
Show account icon
Controls whether the account links (My account / Log in / Log out) are displayed in the mobile menu.
Show brands
Shows an overview of brands in the mobile menu.
Show offers
Displays a link to the offers page.
Show link to new products
Displays a link to the new products page.
Open mobile menu
In the design builder, there is no support for pinning the navigation to the bottom of the online store on mobile, as the older template (America) had.
Instead, you can place the button that opens the mobile menu in two ways:
- At the top of the online store, along with the logo, etc.
- In a floating top menu
The floating top menu is displayed at the top when the customer scrolls down. There you can gather important functions such as the menu button, logo, and shopping cart icon.