The settings in this article are only available for Mobile Menu. You open them in Configure (step 3 on the left sidebar of the Visual Editor). At the top of the window are three quick-jump buttons: Mobile, Desktop and Slide-in direction. The Main menu Slide Direction card is under the Slide-in direction button. The Menu width and Submenu Slide Direction fields are in the two cards Display on mobile and Display on desktop.
A Mobile Menu doesn’t have the Show menu on mobile or Show menu on desktop switches. The menu appears wherever you attach the button that opens it. See how to attach the button in Put your Mobile Menu on your store.
If the Mobile Menu template has a fixed side layout or two columns, the Main menu Slide Direction card (and the Slide-in direction button) is hidden, because the template already sets the direction. For the two-column template, the two fields for how submenus open are also hidden.
Main menu slide direction
Main menu Slide Direction
Where: Configure → Slide-in direction → the Main menu Slide Direction card. This field sets which side the main menu appears from when the shopper taps the open button.
Options: a row of 7 small pictures (no text). Click the picture you want and the preview updates right away. The default for a new menu is picture 1, sliding in from the left.
Counting from left to right and top to bottom, each picture does the following:
| No. | Direction | What the shopper sees when the menu opens |
|---|---|---|
| 1 | From left — default | Slides in from the left edge of the screen |
| 2 | From right | Slides in from the right edge of the screen |
| 3 | Top-down | Drops down from the top edge of the screen |
| 4 | Bottom-up | Slides up from the bottom edge of the screen |
| 5 | Full screen | Expands to cover the whole screen |
| 6 | Floating window | Appears as a floating box in the middle of the page |
| 7 | Fixed on left — Fix on left | Sits on the left side of the page and doesn’t close |
Applies to: only Mobile Menu, every plan, on Shopify, Wix and other websites.
What shoppers see when you change this field:
- On phones, each picture gives exactly one behavior, as in the table above.
- On computers, only direction 1 (from left) and direction 2 (from right) look different. Directions 3, 4, 5 and 6 only change the slide style on phones. On computers, they all slide in from the left.
- Direction 7 keeps the menu fixed on the page instead of sliding in and out. The two switches just below decide which devices it’s fixed on.
Display a fixed menu on desktop
Where: just below the row of 7 pictures in Main menu Slide Direction. These two switches only appear when you choose picture 7. Choosing another direction hides them.
What it’s for: on computers, the menu always sits on the left as a side bar, and it has no close button. The web page content shifts right by exactly the width of the menu.
Value: on or off. The default for a new menu is On. The bar width is set in Menu width (desktop).
Applies to: only Mobile Menu with direction 7 selected, every plan.
What shoppers see when you change this: turning the switch off makes the menu on computers go back to the usual style: it opens with the button and slides in from the left.
Display a fixed menu on mobile
Where: next to the switch above. The full name in the app is Display a fixed menu on mobile (use with caution). It also only appears when you choose picture 7.
What it’s for: pins the menu on the left on phones too. Phone screens are narrow, so this bar takes up part of the web page. Think carefully before you turn it on.
Value: on or off. The default is Off.
Applies to: only Mobile Menu with direction 7 selected, every plan.
What shoppers see when you change this: turning the switch off makes the menu on phones go back to the usual style: it opens with the button and slides in from the left.
Menu and submenu width
Three fields for width are in the Display on mobile and Display on desktop cards, inside the small Menu width box. If all three are left empty (the field shows Inherit), the menu uses the default width.
How to enter numbers, the same for all three fields:
- On phones, you can type
300,300pxor80%. - On computers, the field only accepts
px. Typing300or300pxboth mean 300 px.
Menu width (mobile)
Where: Configure → Mobile → the Display on mobile card → the Menu width box (the hint says px or %). This field changes the width of the Mobile Menu drawer on phones.
Value: px or %. Left empty, the menu is 90% of the screen width, up to 600 px. When you enter a width yourself, the 600 px cap no longer applies: the menu is exactly the width you enter.
Applies to: only Mobile Menu, every plan.
What shoppers see when you change this: the drawer on phones is narrower or wider by exactly the number you enter. For a fixed menu (direction 7), this is also the width of the menu bar on phones.
Menu width (desktop)
Where: Configure → Desktop → the Display on desktop card → the Menu width box (the hint says px). This field changes the width of the Mobile Menu drawer on computers.
Value: px only. Left empty, the menu is 360 px wide.
Applies to: only Mobile Menu, every plan.
What shoppers see when you change this: the drawer on computers is exactly the width you enter, and the rows inside stretch to fit. For a fixed menu (direction 7), this is the width of the left menu bar.
Submenu width (desktop)
Where: Configure → Desktop → the Display on desktop card → the Menu width box, the second field on the right of Menu width (with a small info mark that explains the condition).
Value: px only. Left empty, the submenu panel uses the default width.
Only takes effect when both of these conditions are true: Submenu Slide Direction (Mobile) is set to Top-down expand, and Submenu Slide Direction (Desktop) is set to picture 2, which opens to the side. With other open styles, this field doesn’t change the submenu width.
Applies to: only Mobile Menu, every plan.
What shoppers see when you change this: on computers, the submenu panel that opens beside the main menu is wider or narrower by exactly the number you enter.
How submenus open
Submenu Slide Direction (Mobile)
Where: Configure → Mobile → the Display on mobile card, right below the Menu width box. This field sets how a submenu opens when the shopper taps a parent item on phones.
Options: 2 pictures to choose from.
| No. | Name in the app | What the shopper sees when the submenu opens |
|---|---|---|
| 1 | Top-down expand — default | Expands straight down, right below the item that was tapped |
| 2 | Slide-in from right | Slides in from the right and covers the previous list |
Applies to: only Mobile Menu, every plan. For the two-column Mobile Menu template, this field is hidden.
Effect on other fields: choosing Top-down expand locks picture 4 of Submenu Slide Direction (Desktop). The Submenu width (desktop) field only takes effect when this field is Top-down expand.
Submenu Slide Direction (Desktop)
Where: Configure → Desktop → the Display on desktop card, under the For desktop only group. This field sets how submenus open on computers.
Options: 4 pictures, default is picture 1.
| No. | What the shopper sees when the submenu opens |
|---|---|
| 1 — default | Expands straight down, right below the item that was clicked |
| 2 | Opens out to the side of the main menu — Left-Right |
| 3 | Appears as a floating box with a shadow, like a right-click menu |
| 4 | Slides in from the right |
Applies to: only Mobile Menu, every plan. For the two-column template, this field is hidden.
Picture 4 can only be chosen when Submenu Slide Direction (Mobile) is set to Slide-in from right. If you’re using picture 4 and switch the phone setting to Top-down expand, the app automatically changes the computer setting to picture 1 and shows you a notice.
What shoppers see when you change this: it only affects computers, and each picture gives exactly one opening style, as in the table above. Picture 2 is the only style that lets you set the submenu panel width with Submenu width (desktop).
Quick summary
| Field in the app | What it’s for | Default |
|---|---|---|
| Main menu Slide Direction | Choose one of 7 directions the main menu appears from | Picture 1 — from the left |
| Display a fixed menu on desktop | Pin the menu fixed on the left on computers. Only appears when direction 7 is chosen | On |
| Display a fixed menu on mobile | Pin the menu fixed on the left on phones. Only appears when direction 7 is chosen | Off |
| Menu width — mobile | Set the menu width on phones in px or % |
90%, up to 600 px |
| Menu width — desktop | Set the menu width on computers in px |
360 px |
| Submenu width — desktop | Set the submenu width on computers in px when it opens to the side |
Default |
| Submenu Slide Direction (Mobile) | Choose how submenus open on phones: expand down or slide in | Top-down expand |
| Submenu Slide Direction (Desktop) | Choose how submenus open on computers: expand down, open to the side, floating box or slide in | Picture 1 — expand down |
Other platforms
The steps above are for Shopify — the default way.
These settings are exactly the same as on Shopify.
These settings are exactly the same as on Shopify.