How can I change the order of pages in the Main Menu?

FAQ: How can I change the order of pages in the Main Menu?

By adding specific Javascript code you can change the order in which the Home, Information and Category pages appear in the Main Menu. For example, you can display all category pages before the information pages. 
Please note that it's only possible to change the order in which the set of pages of the same type appear, i.e. you won't be able to display a category page, then an information page, and then a category page again.

Here are instructions on how to change the order of pages in the Main Menu:


1. Login to your Swifty website, go to Website > Edit Website
2. Select the Home page in the Website Map tree and switch to the Edit Page tab
3. Click on Page Sections to expand the list of all sections, find a HTML page section, drag it to the Home page and place it under the Main Menu page section
4.Open the HTML section in the edit mode and add the following javascript code:

<script type="text/javascript">
var menuAll = "";
var menuHome = "";
var menuCat = "";
var menuInfo = "";
for (i = 0; i< $(".name").length; i++){
                var item = $(".name")[i];
                if ( $(item).parents("li").hasClass("home") ){
                               menuHome += "<li id='item_"+i+"' class='home'>"+ $("li#item_"+i+"").html() + "</li>";
                }
                if ( $(item).parents("li").hasClass("category") ){
                               menuCat += "<li id='item_"+i+"' class='category'>"+ $("li#item_"+i+"").html() + "</li>";
                }
                if ( $(item).parents("li").hasClass("info") ){
                               menuInfo += "<li id='item_"+i+"' class='info'>"+ $("li#item_"+i+"").html() + "</li>";
                }
}
menuAll = menuHome + menuCat + menuInfo;
$($(".mainMenu ul")[0]).html(menuAll);
</script>

Where the line "menuAll = menuHome + menuCat + menuInfo;" defines the order of the pages. In this example the Home page('menuHome') will be the first, then all Category pages('menuCat') and all Information pages('menuInfo').

5. Click Done to save changes
6.1 If you wish a new order to be applied to all pages, then:
  
click on the first icon (triangle) for this section and select 'Add Page Section to All Pages' from the context menu, complete the process of adding the section and click Save Changes





See How to make content appear on all pages for more details

6.2 If you wish a new order to be applied to specific pages only, then:

click on the first icon (triangle) for this section and select 'Make Page Section Shared' from the context menu, complete the process of adding the section and click Save Changes. Then you can add this page section to any page you want.

7. Publish the site for the changes to be applied online.

Default order of pages:




 A new order of pages:




Important note for developers and shop owners who use bespoke templates:

This functionality is only available for templates that have the generic template version id=2 or greater. Please see 
Template Version Control for more information on the generic template version.
 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.