Advanced Navigation

Catfish now has a new module which can be added to your storefront using our layout manager - the Advanced Navigation module.

This module allows you to create a navigation bar which can be easily changed, adding new elements to it through our NavEditor. Once you have created the navigation bar as you would like it, you add the same navigation bar to any of your storefronts by adding the module through the layout manager, as this module will be the same across all pages of your storefront.

 To add the module, first you will need to sign in as a storefront administrator, navigate to the page you would like to add the module to, and click on the layout manager icon in the bottom-left of the screen. Below is a picture of what this button looks like.

Layout_manager_button.png

This will expand into the layout manager, here you will want to add the Advanced Navigation module to the container of your choice. We recommend you add this module to NavLower, however this choice is entirely up to you, depending on how you want your storefront's layout to look. Once you have chosen which you would like, click Add Module To Container.

Annotated_layout_manager.png

This will add the Advanced Navigation bar to your storefront, however at this point it will not be populated. You can change this by clicking the "Enable Nav Builder" button which will have now appeared, as seen in the screenshot below.Enable_Nav_Builder_button.png

This will now add the "Add Item" button to your Advanced Navigation bar, as well as change the look of the layout manager.

Nav_builder_enabled.png

If you click "Add Item" the control panel at the bottom will populate with 5 new menus, all of which will affect the currently selected menu item. You will also notice that not only can you add another item to the side of the menu, but you can also add another item as a child of the one you have just created.

New_menu_item_added.png

Below I will be going through the five menu items and what they are for, as well as configure them so that you can see the results:

Enter Menu Item Title

This is simply the text displayed on the menu item. As you can see in the screenshot prior to configuration, this is currently set to "New Menu Item". For this demonstration, I will be renaming this "Cards".

Select Link Type

Here is a dropdown which will allow you to change the link type from static to dynamic. A static link example would be www.yourstore.com/products, which will always take you to that exact URL. A dynamic link would be /products which will always take you to the location <storefronturl/products>. Dynamic links will allow you to make sure that the links do not break under circumstances such as purchasing a new domain name for your storefront, or applying SSL.

Note, as of this article's creation, only static links are supported by this feature.

The field below the dropdown is the field in which you can enter your URL, it is pre-populated with a # so that the link does not point anywhere by default. For this configuration, I will point this URL at a category I have created "Cards"

Select Dropdown Type

There are three dropdown types to choose from:

  • Simple Items
    • This is the default dropdown type to choose from, and it is as the name implies - simple. All this setting will do is display text in the item which serves as the link.
  • Thumb Items
    • Thumb items are similar to Simple Items, except they utilise the "Upload Custom Image" setting, allowing you to have a menu item with an annotated thumbnail image instead of some simple text. As stated previously, everything in this module is can be directly targeted through CSS so you can manipulate this image, remove the text associated with it etc.
  • Simple Items In Columns
    • Simple Items In Columns is similar to Simple Items, except the children of this item type will be displayed in a single column with a thumbnail item at the top of it, and the option to add other items below the thumbnail image. To add another item in the same column as the first thumbnail image, click the first "Add Item" button below it, however you can add another thumbnail image in a new column by clicking the second "Add Item" button.
      This item type would be most appropriate for a parent category, such as cards, where you would like to have each sub-category have an image in its first item represent what is in that category and then items below it link to sub-categories of those sub-categories. Below is a screenshot to demonstrate what I mean by this.

Cards_layout.png

Item Type Description

Any text you enter into this field will appear in the HTML of the object. This allows you to target each menu item individually through CSS as this setting can be different for each item.

Upload Custom Image

This allows you to upload an image to be used as the thumb image of the menu item. As mentioned in the dropdown type explanation, this will only appear if the dropdown type is "Thumb Items". Like most elements of this navbar, this image can be targeted directly using CSS so you can style it how you wish.

In order to upload an image, you simply click "Choose File", select the file from your folders, then click "Upload"

You can re-arrange these items by simply dragging them with your mouse cursor, however you can also save temporarily store items by dragging them onto the black bar located above the control panel, as seen in the screenshot below.

Saved_item.png

Lastly, there is also a "Delete" button which will remove the currently selected item, however note that this will also remove all items which have been added since the "Save" button was last pressed, so make sure to save your work as you are doing it.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk