Brands Menu

Brands Menu

A list of brands that, when hovered over, provides users with a simple way to find branded products.


Brands Menu

Coding Instructions

Step 1: Connect to your website via FTP

Follow our instructions in this article to request access and learn how to connect to your website via ftp.

Step 2: Open up Header template

Locate the header template.html. This can be found in /httpdocs/assets/themes/skeletal/templates/headers/template.html. If using a different template, go into that template instead of the 'skeletal' template.

Open the template in your text editor. We suggest either Visual Studio Code or Atom.

Step 3: Add the Brands Menu code into template

Add the following code block underneath the openning ul with the classes nav navbar-nav and save the template:

[%list type:'content' filter:'content_type=brand' limit:'6' sort:'sortorder'%]
    [%param *header%]
        <li class="dropdown dropdown-hover"><a href="/brands" class="dropdown-toggle">Brands <span class="caret"></span></a>
            <ul class="dropdown-menu">
    [%param *body%]
        <li> <a href="[@url@]">[@content_name@]</a></li>
    [%param *footer%]

The [%list%] dynamically generates a menu based on the content type you define in the filter parameter. The following parameters are used in this [%list%]:

  • type : The content type you'd like to target for the menu.
  • filter: Filters the list to a specific content type.
  • sort : The sort order for the pages in the menu. To set which brands to display, give them a sortorder higher then the rest of the brands and they will display instead of the other brands. Sortorder is editable in the backend of the brand page in the cPanel.
  • limit : Sets a limit of items generated in the menu.

Inside the [%list%], there are three [%params%]: header, body, footer. The body param loops through every item that matches the parameters defined at the top of the [%list%] and gives the defined html markup:

<li><a href="[@url@]">[@content_name@]</a></li>

We are using two B@se data tages here:

  • [@url@] : URL to the contents page.
  • [@content_name@] : The name of the content.

The header and footer param wrap around the body param. The header param opens an overall <li> with a title of Brands and then the <ul class="dropdown-menu> heads the body param. The body loops through the brands, and then the footer param is closing the <li> and <ul>.

Now it will show a list of featured brands at the start of the main navigation in the header of every page:

Was this article useful?

Be notified when this page is updated. Optional.