Citrus-Lime Knowledge Base

Sorry, we didn't find any relevant articles for you.

    Cloud MT // Facet Navigation

    A Best Practice and User Guide

    Facet Navigation is the area that allows you to control your website's menu options. 

    You can find Facet Navigation in the Quick Links area of your Cloud MT menu, and also under Site Management.

    First, let's take a look at the layout of the page.

    Structuring your Facet Navigation

    Your Facet Navigation works in a three-level structure. The easiest way to understand this is to view it side-by-side with a live version of a website menu.

    You can see here how the three levels are 'stacked' within one another. The first-level menu options are the ones that are initially displayed for the customer. They can then click into a first-level option (here, Clothing), to view the second- and third-level options (here, 'Mens Clothing' and then the options within that). 

    To view these different levels within your Facet Navigation set-up page, simply click the little triangle beside the relevant menu option (sometimes called a chevron).

    Alternatively, to expand all the levels at once, use the Expand Visible Rows button.

    Adding to your Facet Navigation

    • To add a new first-level menu option, you need to click the blue Add a row button: 
    • To add a new second-level menu option, you click 'Add' beside the first-level option under which you would like to create it.
      For example, the 'Mens Clothing' option above will have been created by clicking Add next to the first-level option 'Clothing'.

    • To add a new third-level menu option, you click 'Add' beside the second-level option under which you would like to create it.
      For example, the 'Mens Base Layers' option above will have been created by clicking Add next to the second-level option 'Mens Clothing'.

    Type in the name for your new menu option, and click Save.

    Editing your Facet Navigation

    Once a new menu option has been created, it can be edited. Click Edit beside the relevant menu option. A pop-up window appears with the settings available.
    The set-up is split into Step 1 and Step 2. For the most part, you will find yourself using Step 1:

    Navigation Option Name: this is the name of your menu option, which you set when you created it. You can make changes here if needed.
    Display Order: this is the position of the menu option within its level. The lower the number, the higher it will display in the list (display order 1 is the first option in the list, for example).
    Active: ticking this box makes the menu option active on your website. Untick it to hide it from the menu.
    Use Custom URL: this can be used if you want the menu option to link to a specific page, rather than selecting products using the filters below. For example, you would use a custom URL to link to a collection, or an information page on your site, such as a store page. If you are linking to a collection, you will need to use /collection/<URL fragment for your collection>.

    Below, you have a series of filters to choose from. These are used to create the results page that the menu option links to.
    You should bear in mind that these filters work on an 'and' basis, not 'or'. Therefore, in the example above, the following products would be displayed if a customer clicked on that menu option:

    Products that are in the Item Group Baselayers AND have the Gender Female AND have the Age Adult.

    At the bottom of the Step 1 pop-up window, you see a message confirming how many items would be displayed with your current settings. This is a good opportunity to sense-check the filters you have selected.

    Once you are happy with the settings, click Next Step to proceed to Step 2.

    In Step 2, you have the option to customise the results page that is displayed when a customer clicks on your menu option.

    SEO Page Title: This is a title for the results page that will be used for the purpose of Google search results. It does not display on the results page itself, but it does show in the tab of a Google Chrome window.
    Page Header: 
    This is the header that will actually display at the top of the results page.
    Custom Canonical URL: This is an advanced SEO feature - we only recommend those with an understanding of Canonical URLs edit this field.
    Allow Google Index: This tells search engine bots/crawlers that this results page should, ideally, be indexed in search results. Ticking this overrides the platform default, which is to prevent indexing of similar pages.
    Set/Edit Desktop Image: 
    Here you can upload an image to be displayed at the top of the results page.*
    Here you can add some text to be displayed on the results page (for example, summarising the products or brand).

    *We recommend that the minimum image size to upload for this be 1600px by 500px to cover all device types. You can read about our recommendations for image sizing here: 

    You can also access some Advanced Options in Step 2 of the set-up window, by clicking this button:

    Is Clickable: You would only deselect this box if you do not want the menu option to be a clickable option for customers.
    Meta Description: 
    As explained on the page itself, this is an advanced Search Engine Optimisation (SEO) option and should only be used by those confident in this area.
    Landing Page Description: 
    If your results page is a Landing Page, you can specify a description here.

    Landing Pages reduce loading times on pages with large numbers of results. By default, they are automatically triggered on pages with 500+ items. You can configure your Landing Page settings by navigating to Item Organisation > Find & Filter Landing Pages in your Cloud MT menu.

    Once you are happy with your settings, click Save to save the changes and return to your main Facet Navigation screen. To cancel the changes, click Close.

    Previewing your Facet Navigation

    You can preview any of the options you have created by clicking the Preview link beside them.

    This will show you a preview of how your current settings will display on your website.

    NOTE: It is worth remembering that this is just a preview. You will not see any changes pull through to the live version of your site until the next refresh of your Find & Filter cache. You can read more about the caching schedule of your site here: 

    Deleting your Facet Navigation

    *** Please note that deleting a menu option will also delete all of the options within it. For example, deleting the Mens Clothing second-level option in the examples shown above would also delete all five of the third-level options within it.

    There is no 'undo' button for deleting parts of your Facet Navigation. 

    If you wish to hide menu options, but are unsure if you will need them again in future, it is much better to deactivate them using the Active status checkbox in Step 1 of the setup (see above). These could then be easily accessed again in future. This would be a good option for seasonal menu options, such as Christmas sales. ***


    When deleting navigation options...

    If you opt to delete your Facet Navigation options, please ensure that all secondary options within the navigation are deleted prior to deleting the 'main' option. For example, if the navigation option where Bikes > Road Bikes, ensure that Road Bikes is first deleted and then Bikes. Not doing so could result in 'orphaned' settings within your database. 

    Was this article helpful?

    Still can't find
    what you are looking for?

    Our support team is here to help you.

    Contact Support

    Powered by