Menu

About EComposer Menu element

Menu element in EComposer refers to the navigation menu that appears on your online store. It allows you to organize and structure the different pages and sections of your website, making it easier for visitors to navigate.

The Menu typically appears as a horizontal or vertical list of clickable links that help customers navigate your store. It’s usually displayed across all pages for consistent navigation. Common menu items include Home, Shop, Collections, About, Contact, or any other pages relevant to your store.

How To Add Menu Element

• Step 1: Click the “Elements” button on the left menu and go to Shopify tab
• Step 2: Select “Menu” element from the dropdown menu. It’s under the Shopify category.
• Step 3: Drag and drop the desired variant of the Menu element into the page editor.

Config the Menu element

1. Content

Once you’ve added the Menu element, you can customize it through several settings in the Content tab.

• Pick a menu:
  Choose an existing menu that you’ve already created in Shopify. This connects your EComposer menu to your store’s navigation structure.
• Menu layout:
  Select between Horizontal and Vertical layouts to best fit your page design.
• Open the menu links on a new tab:
  Enable this option if you want menu links to open in a new browser tab when clicked.
• Icon:
  If your menu contains submenus, an icon will automatically appear. You can also customize the icon style from this setting.
• Show menu icon on Tablet and Mobile:
  Turn this option on to display a responsive menu icon on smaller devices. This makes your navigation easier to read and interact with on mobile screens.

2. Design

• General:
  You can customize the overall appearance of the menu by adjusting settings such as Background, Box Shadow, Alignment, Border, and Border Radius.

• Link:
  Modify the Typography, Text Color, Text Shadow, and Spacing for different states — Normal, Hover, and Active — to enhance your menu’s readability and interactivity.

• Icon:
  Customize the Color, Size, Rotation, and Spacing of icons to match your store’s visual style and layout.

Frequently Asked Questions

1. If you convert Menu element from Horizontal style to Vertical style and it displays incorrectly (for example: items are misaligned, no line breaks, icons are in wrong position, dropdown does not open in the right direction, etc.), you can fix it by following the video below.

2. The side menu on mobile does not display content, possibly because the background and link have the same color.