Advanced Menu | Menu Builder

With Menu Builder, you can create advanced menus that highlight featured items, guide customers effectively, and offer a wide range of image-and-text layout options. Start designing a customized quick navigation for your store!

⚠️ Before you begin:

• If your store is using the Layout Engine editor, please refer to this document to adjust your code, or contact our Online Merchant Success Team for assistance.
• The Menu Builder interface is generally similar to SHOP Builder. For an overview, please refer to the related FAQ.

This article will cover the following:

• Advanced Menu
  • Create an advanced menu
  • Apply advanced menu
  • Edit / Delete
• Menu Builder
  • Advanced menu design
  • Overall Layout Settings
• Notes

1. Advanced Menu

Create an advanced menu

Step 1

In the SHOPLINE Admin, go to [Online Store Design] > [Menu Navigation], and click Create advanced menu.

*Notes:

• Only supported for Ultra Chic / Kingsman / Varm / Philia theme templates.
• Each online store only supports creating 1 advanced menu.

Step 2

Go to [Advanced Menu Design] > [Add Menu] to start using Menu Builder.

Apply advanced menu

Step 1

Go to [Online Store Design] > [Menu Navigation], and click Apply.

Step 2

Read the pop-up instruction and click Confirm.

Step 3

An "In use" label will be displayed next to the advanced menu.

Edit / Delete

Go to [Online Store Design] > [Menu Navigation] > [Advanced Menu], click Edit or click "⋯" > Delete to delete.

Read the pop-up instruction, check the confirmation checkbox, and click Delete.

2. Menu Builder

Please select the layouts for the advanced menu. A total of 4 layouts can be selected:

• Expand hierarchically - Image with Text List
• Expand all - Text-Only List
• Expand all - Image with Text List
• Expand all - Text-Only & Image with Text List

Advanced menu design

Step 1

The default name for the menu is "L1 Expand OOO - OOO List". Hover the cursor over each menu to find the "Edit", "Add Submenu", and "Delete" icons.

*Note: You can add up to 8 L1 menus.

Step 2

Click the "" icon to edit the L1 menu. Click the " " icon to delete.

	Descriptions
	Menu Title Enter up to 50 characters. The supported languages are the same as the store settings.
	Menu URL Supports entering external URL or selecting the system pages (Page, Product Category, Promotion, Blog Article, Blog Category).
	Open link format Select to open in the current window or in a new window.
	Submenu expansion method Supports two methods: Expand all When selecting L1 menu, you can also see all the submenus (L2 + L3) Expand hierarchically When selecting L1 menu, you can see the L2 menu. Select the L2 menu again to see the L3 menu.
	Second-Layer Submenu per Row (Desktop) When the submenus are fully expanded, you can configure the number submenus shown per row on the second level.

Step 3

Select the "+" icon next to the L1 menu to add the L2 menu. Similarly, you can select the "+" icon next to the L2 menu to add the L3 menu.

*Note: You can add up to 12 L2 menus and up to 10 L3 menus.

Step 4

Click the " " icon to edit the L2/L3 menu. Click the " " icon to delete. Click Save to complete.

	Descriptions
	Menu Title Enter up to 50 characters. The supported languages are the same as the store settings.
	Text Alignment Left / Center / Right
	Bold Formatting Bold / Unbold
	Menu URL Supports entering external URL or selecting the system pages (Page, Product Category, Promotion, Blog Article, Blog Category).
	Open link format Select to open in the current window or in a new window.
	Display image on desktop/mobile L2 Menu When the submenu expansion method is set to Expand all, this field can be customized. When set to Expand hierarchically, images will not be displayed even if this setting is enabled. L3 Menu Images will be displayed when this setting is enabled, and hidden when disabled.
	Image (Desktop / Mobile) Supports JPG／JPEG／PNG formats. L3 menu only supports 1:1 proportion.
	Image Proportion (Desktop / Mobile) L2 Menu Supports 3:4 / 2:1 / 1:1 formats. L3 Menu Defaults to 1:1 format.
	Image with Text Position (Desktop / Mobile) L2 Menu Image on top, text below / text on top, image below / image left, text right. L3 Menu Image on top, text below / image left, text right.

Step 5

Click and drag the "" icon to rearrange the order of the menus. Menus are moved by hierarchy level. For example, when you move an L1 menu, all its L2 and L3 menus will move along with it.

Step 6

Ensure you Save all the settings for each menu. Then, click Preview Page > Publish.

Overall Layout Settings

Step 1

Go to [Overall Layout Settings] > [Style settings].

Step 2

Once completed, click Save.

	Descriptions
	Menu Alignment (Desktop) Left / Center / Right
	Parent menu expansion method Select the expansion method for the parent menu (L1 menu): None or Arrow.   None Arrow
	Submenu Color Customization When enabled, you can customize the background and text colors for L2/L3 menus. When disabled, the system will apply the menu colors set in SHOP Builder.
	Background Select the menu background color.
	Text Select the menu text color.

Step 3

Ensure you Save all the settings for each menu. Then, click Preview Page > Publish.

3. Notes

• This feature is only supported for Ultra Chic, Kingsman, Varm, and Philia store themes. Each store can create up to one advanced menu.

• If you enable "Display image on desktop/mobile" but do not upload any images, the system will display a default image.

  

Read more

• Menu Navigation
• Announcement Bar / Header Settings | SHOP Builder