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 documentationCreate a link list in menu
The documentation below will help you to create a link list menu:
Add, remove, or edit menu links - official documentationCreate 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 documentationCreate drop-down menu with images
- Upload your images in a store. Go to Settings > Files > Upload images. Image size 280x370px. Use *.png 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:Copy the URL generated by Shopify
Go in Online store -> Navigation
Insert the copied image code near the menu item title
- Result:
Create simple submenu with title
INSTRUCTION- Work with created menu:
- 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:
Pay attention to the methods of transforming a menu item as megamenu item:
- Result:
Create simple submenu 2 columns
INSTRUCTION- Work with a created menu:
- Go to Customize Theme > section Header
- In the section open or add tab Simple submenu 2 columns and add menus in special fields:
Pay attention to the methods of transforming a menu item as megamenu item:
- Result:
Create megamenu
INSTRUCTION- Work with created menu. Main menu item Women. External block for drop-down Women. *Create with old block method:
- Go to Customize Theme > Header section
- In the Header section open or add Megamenu tab and add menus in the special fields:
Pay attention to the methods of transforming a menu item as megamenu item:
- Result:
Megamenu options
- Items in row and images:
- Widgets and widgets settings. None / Gallery / Banner. Example with gallery:
- 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:
- Result:
Drop-down badges
- Work with created menu:
-
Open drop-down menu. In the end of the item name paste html code with badge html:
Code for New:New
Code for Featured(Custom Text):Featured
Code for Sale:Sale 15%
- Result:
Links to a new window
- Go to Theme Customizer, select the “General settings” tab and choose the “Settings” option.
- Find block Navigation
- Select the options with navigation in new window