Share:

05.09.2017 by Daria Symanko.

Topics: hubspot cos templates, Turbo Sodium, Turbo Documentation

How To Set Up Filtering By Categories On Turbo Sodium Templates

Nowadays, filtering is an essential function for not getting lost in the content on differents site pages and streamlining your information correctly. Our Turbo Sodium templates are no exception and also offer this advanced feature on Case Studies, Portfolio and Product pages both on website and blog version of pages.

 

To get started, let's figure out, what the principal difference between website pages and those built on the blog?

In website template, you have a visual editor. Listing page is made in drag&drop technology, and links to the each single page should be set manually.

In blog template, listing page and single post are connected and linked automatically. Listing page has no visual editor so layout modifications can be implemented only in the template builder.

Accordingly, filter setting will slightly differ on individual subpages. Let's divide them into Website and Blog rows and consider all single cases.

 

WEBSITES

The filtering on these pages is set at the listing level. 

So Case Studies 1, Case Studies 2, Portfolio and Product page 2 based on websites page work this way:

  1. Go to your Listing Page.
  2. Click on HubSpot Tools icon in the right top corner -> Edit Page.

     

    portfolio edit.png


    So now you are in a visual editor.

  3. Go to custom modules by clicking a box icon in the left sidebar, locate "Simple Menu" where give names to your Categories (Menu Labels).

     

    simple menu.png

     

  4. Open a list of custom modules again and find the list of your Single cases, products or portfolios under the Simple Menu.

    single portfolio.png

     

  5. Click on any particular single case and find the category field, where input the name of category.

     

    box category.png

     

  6. If your topics also have subcategories, start to fill a field by subcategory, then put separative vertical bar without space and write the name of category next. Example: Subcategory1|Category.

    NOTICE: Write these names in Box Category without spaces.

     

    subcategories box.png

     

BLOGS

Filtering on Case Studies 2 and Portfolio blog pages are set automatically.

Only Case Studies 1 and Product page 2 based on blogs work a bit different:

  1. Go to your Blog page, click on HubSpot Tools icon on the top right side and choose "Blog dashboard."

    product blog.png

  2. Choose single blog post to edit. Go to Settings and add topic names on the line called "Tags."

    tags blog.png

  3. For Case Studies 1 you should create an advanced menu: Go to Content -> Content Settings -> Advanced Menu. Click on "Add another menu".

    case studies filters.png

     

    For Product page 2 you should set a simple menu: Go to your Blog page, click on HubSpot Tools icon on the top right side and choose "Blog layout." There you will find the "Simple Menu" module.

     

    product filters.png

     

  4. For both pages fill the links for topics on the right side (blog_name/topic/topic_name). Example: case_study/topic/topic1.
    On this step work with Product Page 2 is done.

     

  5. For Case Studies 1 go to "Listing Layout" and set created menu in Advanced Menu module. Click on gear icon -> Edit options. In Menu line find the appropriate one from the list.

     advanced menu case.png

     

If you still have some questions, submit us a ticket in Support System, and we will respond up to 48 hours in working days.

 clickray-CONTACT3.png