navigation-setup.md

layout	title	description	category
default	Argento Top Navigation Setup	How to make Argento-like top navigation menu	Argento

Argento Top Navigation

Contents

• Home Link
• Shop By dropdown
• Categories dropdown
• Featured Product dropdown
• EasyBanner dropdown
• Special Products dropdown
• Brands dropdown

Home Link

1. Navigate to Templates-Master > NavigationPro and expand top menu in left tree

2. Choose first visible category

   

3. Switch to Siblings tab and add new sibling with following values:

   Content: <a href="{% raw %}{{store url='home'}}{% endraw %}" title="Home" class="nav-a">Home</a>
   Sort Order: -30
   

   

Shop By dropdown

1. Navigate to Templates-Master > NavigationPro and expand top menu in left tree

2. Select first visible category

   

3. Switch to Siblings tab and add new sibling with following values:

   Content: Shop By
   Sort Order: -20
   Dropdown CSS styles: width: 960px; padding: 10px 0;
   Dropdown content: Insert Easy Catalog Images widget using WYSIWYG editor
   

   Don't forget to set Root category field for Easy Catalog Images widget

   

Categories dropdown

1. Navigate to Templates-Master > NavigationPro and expant top menu in left tree

2. Choose first visible category

   

3. Switch to Siblings tab and new sibling with following values:

   Content: Categories
   Sort Order: -10
   Dropdown css styles: width: 660px; padding: 10px 0; text-align:left;
   Dropdown Content: Insert Easy Catalog Images widget using WYSIWYG editor
   

   

Featured Product dropdown

1. Make sure that you have set at least one product as featured (Check the featured attribute value at product edit page)

2. Navigate to Templates-Master > NavigationPro and expand top menu in left tree

3. Choose category you wish to edit

   

4. Switch to Dropdown columns tab, select Custom mode and add new column with following values:

   Type: Widget or Plain HTML
   Content: Insert Hightlight: Featured Products widget using WYSIWYG editor
   Width: 450px
   

   

EasyBanner dropdown

1. Navigate to Templates-Master > EasyBanners > Manage Banners and add new banner that will be shown in dropdown.

2. Navigate to to Templates-Master > NavigationPro and expand top menu in left tree

3. Choose category to edit

   

4. Switch to Dropdown columns tab, select Custom mode and add new column with following values:

   Type: Widget or Plain HTML
   Content: Insert EasyBanner widget using WYSIWYG editor
   Width: 220px
   Sort Order: 50
   

   

Special Products dropdown

1. Navigate to to Templates-Master > NavigationPro and expand top menu in left tree

2. Choose category to edit

   

3. Switch to Dropdown columns tab, select Custom mode and add new column with following values:

   Type: Widget or Plain HTML
   Content: Insert Hightlight: Special Products widget using WYSIWYG editor
   Width: 650px
   Sort Order: 55
   

   

Brands dropdown

1. Create Attribute Page using Templates-Master > AttributePages > ManagePages if didn't create it before.

   Check More at AttributePages Manual

2. Navigate to Templates-Master > NavigationPro and expand top menu in left tree

3. Choose category to edit

   

4. Switch to Siblings tab and add new sibling with following values:

   Content: <a class="nav-a hidden-tablet" href="{% raw %}{{store url='brands'}}{% endraw %}">Brands</a>
   Sort Order: 50
   Dropdown css styles: 950px
   Dropdown content: Insert Attribute Page: Option List widget using WYSIWYG editor