How to add category menus to the footer?

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

Please note that while we offer this tutorial and it is tested and working at the time of creation, any customization of or support for these types of articles is outside of our scope of support. If you require assistance with any design or customization, we recommend that you either visit our community forums or contact one of our fantastic design consultants.

By default, our newest templates such as Classic White and Bedazzled show a listing of categories in the top menu bar, followed by the web pages set to display in the store navigation menu. This article provides step-by-step instructions on how to move your pages menu or category menu to the footer of your template.



1.) Login to your store's control panel.

2.) Click on Design at the top right.


3.) Click on the Template Files tab.



4.) Scroll down to the Panels folder and click the plus sign next to it



5.) Find the file called Header.html, and click Edit.



6.) The highlighted code below controls where the Category menu items and Page menu items display. You can change their order or remove an item entire from this area. (You may need to customize the code depending on your wants and what your template looks like.)



7.) Let's move the Pages Menu to the Footer of the template. To do so, we will first copy the Pages Menu Panel code, which is: %%Panel.PagesMenu%%

2013-02-27_1233.png

8.) Now we'll navigate to our Panels folder and edit the the Footer.html file.

2013-03-14_0918footermenu.png

9.) Here you can see the call to the Pages Menu appears in the section. You can remove this panel to delete the menu. You can also replace it with the Category menu panel code, %%Panel.SideCategoryList%%,if you want a list of your categories to appear here.


2013-03-18_0924pagemenudefault.png
?

Here's how the template looks with the Category panel displayed below the Pages Menu. You can also add additional HTML code in this panel area to add additional links or information to the footer of your page.
2013-03-18_0832catmenubottom.png

10.) Click "Save" in your template design editor to ensure that any changes you have made are saved.



<!-- AUTHOR | Get famous mofos! -->
Ninja'd by Maria Huemmer
Photo of Drew N

Drew N, Community Manager

  • 259,164 Points 100k badge 2x thumb

Posted 5 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.