Menu Setting

Menu Setting

Optimize your store’s navigation with Tapita’s advanced menu options, including a customizable multi-column dropdown (mega menu). This guide provides step-by-step instructions for creating and configuring menus to enhance the user experience.

Creating and Editing Your Menus

Create a Menu in Shopify Navigation: To create or edit the menus you are going to use in your theme, go to your Shopify admin and click on Online Store > Navigation > Create menu.
create-menu-in-shopify-navigation
After creating the menu, you can:
  1. Add Menu Name: Enter a descriptive name for your menu (e.g., "Main Menu," "Side Menu").
  2. Add Menu Items: Start adding menu items to your newly created menu. Menu items are the individual links that users will click on to navigate your store (e.g., "Home," "Shop," "About Us," "Contact").
create-menu

Before adding menu item, you can configure the header block in the Section settings. These options will affect the entire header:
  1. Sticky Header: A sticky header, also known as a fixed header, remains visible at the top of the page even when the user scrolls down (only on desktop). Enable this to ensures that key navigation elements, such as the menu and search bar, are always accessible.
  2. Color Scheme: Choose a color scheme for the menu area.
  3. Header in Slideshow: Enable this to include the header in the slideshow. When enabled, the header will use the chosen color, but will revert to the default color on hover. If disabled, the header will always use the default color from the chosen scheme.
  4. Logo: Choose the logo image to display in the header.
  5. Mobile Menu Color: Choose the display color for the mobile menu.
  6. Spacing: Customize the spacing of the header block.


Adding and Customizing Menu Items

Add a menu item

  1. To add a menu item, go to Online Store > Navigation > Menus. Select the menu you wish to add menu items on.
customize-menu-item

  1. Click the "Add menu item" button to add a new top-level item to your menu.

  1. To create a sub-menu item, you can either: Click the "Add menu item" button under an existing parent menu item (1) or Drag and drop a menu item under a parent menu item (2).


Add Horizontal Item Menu

  1. In the Theme Editor, click Add block.
  2. Select Horizontal Item Menu
add-horizontal-menu

Customizing Horizontal Item Menu

To customize the appearance and behavior of your Horizontal Item Menu, navigate to Sections -> Header -> Horizontal item menu.
General settings:
  1. At the selected Horizontal item menu, you need to fill in the title for the menu at the Horizontal title. You must enter the exact name of the menu item you wish to customize into the Horizontal title field. This menu item name was initially defined when you created the menu in your store's Navigation settings. For example:
    1. If you want to customize the "Collection" dropdown menu, you must enter "Collection" in the "Horizontal title" field.
    2. If you are customizing a "Shop" menu item, you must enter "Shop" in the "Horizontal title" field.
horizontal-menu-title
  1. Under Target, you can choose whether to open the link in the current window or in a new window.
Dropdown configuration settings:
  1. Enable Dropdown Menu: Enable or disable dropdown menus for this menu item.
  2. Dropdown Color Scheme: Choose the color scheme for the menu items that appear on hover.
  3. Dropdown Width: Set the width of the dropdown menu. The default width is 100%, meaning that the dropdown menu will spread out across the full width of the screen or its container.
  4. Dropdown Align: Choose how the dropdown menu aligns, with the following options:
    1. Item: Aligns the dropdown menu based on the position of its parent menu item.
    2. Container: Aligns the dropdown menu based on the boundaries of the container that the menu is placed in.
dropdown-configure

Dropdown Content Block Structure:
The dropdown menu allows for a highly customizable layout with a total of 13 content block positions. These blocks will be displayed in a specific order:
  1. Top Blocks (1-6): You have six top blocks to use, which are displayed at the top of the dropdown menu, above any other content. 
  2. Category Block: This single block displays your menu categories.
  3. Bottom Blocks (1-6): You have six bottom blocks to use, which are displayed at the bottom of the dropdown menu, below any other content. Similar to top blocks, they are suitable for featuring specific products or promotions.
Category Block Settings:
  1. Enable Category Block: Toggle this setting to enable or disable the display of the category block within the dropdown menu.
  2. Width: Set the width of the category block within the dropdown.
  3. Category Column: Choose the number of columns that will appear in your category block.
For example, if you set the category column to 5 and set the width to 100%, your categories will display in 5 columns within the dropdown menu and the category block will occupy the full width of the dropdown menu.


Top Block Settings:
  1. Enable Block Top: Toggle this setting to enable or disable the display of the top content block within the dropdown menu. When enabled, this block will be placed at the top of the dropdown menu, above the category block.
  2. Width: Set the width of the top content block.
  3. Image: Upload an image for the top block.
  4. Link Image: Add a URL so that the image links to a specific page.
  5. Description: Add a description of your top content block.
For example, when you configure the Top Block 1 settings like this:
  1. Enable Block Top: Enabled
  2. Width: 50%
  3. Image: Upload an image of the product, for example, a pair of shoes
  4. Link Image: Add a URL that directs users to your "Shoes Collection" page
  5. Description: Add the name of the shoe
This configuration will display a top block in your dropdown menu, enabled and set to 50% width, showcasing an image of a shoe that links to your "Shoes Collection" page, with the name of the shoe appearing below the image.
top-block-configure

Bottom Block Settings:
  1. Enable Block Bottom: Toggle this setting to enable or disable the display of the bottom content block within the dropdown menu. When enabled, this block will be placed at the bottom of the dropdown menu, below the category block.
  2. Width: Set the width of the bottom content block.
  3. Image: Upload an image for the bottom block.
  4. Link Image: Add a URL so that the image links to a specific page.
  5. Description: Add a description of your bottom content block.
For example, when you configure the Bottom Block 1 settings like this:
  1. Enable Block Bottom: Enabled
  2. Width: 25%
  3. Image: Upload an image of the product, for example, a sweater.
  4. Link Image: Add a URL that directs users to your "Sweater Collection" page
  5. Description: Add the name of the sweater
This configuration will display a bottom block in your dropdown menu, below the category block, enabled and set to 25% width, showcasing an image of a sweater that links to your "Sweater Collection" page, with the name of the sweater appearing below the image.

bottom-block-configure

You have now configured your Menu. Experiment with these settings to achieve your desired navigation experience.

    • Related Articles

    • Header Setting

      The header is a crucial element of your online store, serving as the primary navigation point and brand identifier. This guide will walk you through the various settings available to customize your header and create a seamless shopping experience. ...

    • Azzel Theme Setting

      On the customization page, click on the second icon to access the theme settings. Now, let’s explore each component in the theme settings one by one! Color With the Colors setting, you can create and customize unique color palettes for different ...

    • Color Swatch Setting

      This feature allows you to display color swatches (visual representations of colors) for products with color options, instead of just displaying the color names as text. Configuring Color Swatches: Go to Theme Settings > Color Swatches. For each ...

    • Home Page

      Understanding Sections and Blocks Sections are the building blocks of your store's layout in Shopify, providing a flexible way to arrange content on each of your store's pages. Accessible from the left-side menu in the Theme Editor, sections are made ...

    • Introduction

      Welcome to the Azzel Theme user documentation. How to use Azzel documentation User guides are arranged in the categories described in the following table. For guidance with using Azzel, follow the links in the table or select a user guide from the ...