How To Change and Customize Your Websites Horizontal Menu

Customize your website horizontal menu and make it blend seamlessly with the overall feel of your ecommerce website.

In today’s modern website, browsing through site pages and content is often via a horizontal menu. Your horizontal should be planned and adjusted carefully, so as to reflect the proper hierarchy of your menu structure. It is important that your users and potential buyers should easily be located within your shop.  Where they could navigate back and forth without much hassle, thanks to your menu.

This week we will continue to take a look at the menu structure  in Prestashop and thirty bees together. As mentioned in lesson series #3, it is very important to take the time to create a clear and easy-to-access hierarchy of content for your customers and search engines.

The Prestashop-thirtybees horizontal menu

In Prestashop-thirtybees, the horizontal menu is integrated by default, it is easily customizable at the content level and remains very “modular”. Which means you can change it on the modular level and the change never affected the other parts of the website. Thanks to its accessibility, any client can easily manage it.

Before going into the detail to customize your website horizontal menu, remember to ask yourself the right questions. You are not simply arranging the menu structure but you try to arrange the items in the most logical order. The most sell-able items and easily accessible categories should come first. The naming of categories is also very important because the menu will automatically take in the hierarchy you have already created.

In this lesson series you are going to learn to customize your website horizontal menu:

• Discover the Prestashop or thirty bees horizontal menu.
• Presentation of the automated “Home” category.
• Classic integration of categories / subcategories.
• Integration of images in the menu with CSS adjustments.
• Add a link to the contact form.
• Added a link to a CMS page.
• Create the Blog link and add to top menu.

Let’s discover how to customize your website horizontal menu.

First you have to login to your back-office area >> then click on Modules and Services >>  type the word “menu” on the search box.. >> you should see a screen like below:

Click on the “configure” button on the right. It will bring you to  the menu details where you can work your menu magic.

Once in the menu configure page, the first thing you will notice is it has 2 menus listed. That is the basic configuration for the default thirty bees install.

The first thing we need to do here is create the “Home” menu for the horizontal menu.

Click on the “Home” at the right box area, click the “Add” to add it to the list of active horizontal menu. It will appear below the two menus already there. Change the position of the “Home” menu by clicking the up or down arrow. Put the “Home” menu at the top of the list. Scroll down a little bit and click “save”.

Go to your front-office website, and refresh the page to effect the change you just made. You should see the “Home” menu at the beginning of the horizontal menu.

So far so good, yes?

Let’s create a menu for a category, and work this up a little bit.

On the right box where we choose the “Home” menu, scroll to where you see the word “categories”. All the categories you create or created by default and is active, is listed here. Click on the “Gifts” category, click the “Add” button, and save you work.

Go to your front end store and refresh to see the changes you have made. If you did it correctly, you should see your menu and the automatic hierarchy when you hover over it, like the image below:

There is one thing that needed to be mentioned, and that is the image for the category, check the image below:

Set it to yes, the effect is like the image below:

The default is set to 3 columns, you can set it to 5 columns by working on a small css tweak. Implement the following css to the blockTopMenu module css. Go to your Cpanel, click on File Manager, click on public_html, then themes, click on “niara” theme or the default theme. Open the css/ folder, then modules/ folder, look for blocktopmenu and open it, click on css/ folder, right click on the blocktopmenu.css file, click edit to edit the file. Insert the following css code:

Adding a contact page to the horizontal menu

Click “Add”, and then click “Save”.

How is it so far? Easy, right?

There are two other things we need to do here, that is to Add a link to a CMS page and create the Blog link to top menu.

Let us add the CMS link. The process is the same as adding the “Home” menu.

Go to the right box at the top. Find the CMS, below it are the lists of the available contents. Let’s add the “about us” page. Click on it and add it just like what we did with the previous ones. Position it where you want in the menu hierarchy, click “Save”.

The last one is to add a link to the Blog. To do this, we will have to create a link, just like we did with the “Contact Us” page. So again, scroll down to the bottom till you see the “Add New Link”. Enter in the details like so:

Click “update” or “save”.. Go up to the right box at the top, scroll down to find the “Top Menu Links”, the “Blog” link should appear under it. Click on it, and then click “Add”.

Click “Save” to save your work!

Go to the front of your ecommerce store, refresh the page. You should see you new Blog menu in the horizontal menu like so:

You can also add a link to promotions page from here.

Well, to customize your website horizontal menu was not so bad, right?

Prestashop and Thirty bees are two of the easiest ecommerce store to manage. As with all the other platform out there, there is a learning curve that every one go through learning the system. But from my experience, Prestashop and thirtybees is one of the easiest and intuitive systems out there. Simple to manage and light on the server.

Check out how to work on the Prestashop or thirtybees product categories.  Also, if you haven’t already, learn how to change the logo and customize your homeslide turorial.

Let us know what you think of this tutorial in the comment section.