Setup navigation

Before you start to work with the navigation for your store, we recommend you to follow the link below and look at the information, which may be very helpful for you.

Navigation - official documentation

Create a link list in menu

The documentation below will help you to create a link list menu:

Add, remove, or edit menu links - official documentation

Create a drop-down menu

Drop-down levels = 4 with old block method

Drop-down levels = 2 with new official method

Create a drop-down menu - official documentation

Create drop-down menu with images

  • Upload your images in a store. Go to Settings > Files > Upload images. Image size 280x370px. Use *.png images: Navigation images
  • Go to Online Store > Navigation
  • Open drop-down menu. In the end of the item name paste the following html code with image link (in the data-src attribute) from uploaded files:
    Code: <img class="lazyload" data-src="YOUR IMAGE URL" alt="">

    Copy the URL generated by Shopify

    Navigation images

    Go in Online store -> Navigation

    Navigation images

    Insert the copied image code near the menu item title

    Navigation images
  • Result: Navigation images

Create simple submenu with title

INSTRUCTION
  • Work with created menu: Create Simple submenu with title
  • Go to Customize Theme and choose Header section
  • In the Header section open or add Simple submenu with title tab and add menus in special fields: Create Simple submenu with title

    Pay attention to the methods of transforming a menu item as megamenu item:

    Create Simple submenu with title
  • Result: Create Simple submenu with title

Create simple submenu 2 columns

INSTRUCTION
  • Work with a created menu: Create Simple submenu with title
  • Go to Customize Theme > section Header
  • In the section open or add tab Simple submenu 2 columns and add menus in special fields: Create Simple submenu with title

    Pay attention to the methods of transforming a menu item as megamenu item:

    Create Simple submenu with title
  • Result: Create Simple submenu with title

Create megamenu

INSTRUCTION
  • Work with created menu. Main menu item Women. External block for drop-down Women. *Create with old block method: Create Megamenu Create Megamenu
  • Go to Customize Theme > Header section
  • In the Header section open or add Megamenu tab and add menus in the special fields: Create Simple submenu with title

    Pay attention to the methods of transforming a menu item as megamenu item:

    Create Simple submenu with title
  • Result: Create Simple submenu with title

Megamenu options

  • Items in row and images: Items in row
  • Widgets and widgets settings. None / Gallery / Banner. Example with gallery: Widgets
  • Bottom banners: Bottom banners

Footer column links

  • Create a link list in menu for the footer column. If you have different columns, you will have different menus.
  • Go to Theme Customizer and select the Footer section.
  • Open or add Footer Links tab and add menus in special fields: Footer navigation
  • Result: Footer navigation

Drop-down badges

  • Work with created menu: Drop-down Badges
  • Open drop-down menu. In the end of the item name paste html code with badge html:
    Code for New: <span class="tt-badge tt-new">New</span>
    Code for Featured(Custom Text): <span class="tt-badge tt-fatured">Featured</span>
    Code for Sale: <span class="tt-badge tt-sale">Sale 15%</span>

  • Result: Drop-down Badges

Links to a new window

  • Go to Theme Customizer, select the “General settings” tab and choose the “Settings” option.
  • Find block Navigation Links in new window
  • Select the options with navigation in new window
BACK TO TOP