How to add category/filters to your sections

Hello and welcome to your new GoodBarber tutorial! 

Today I'm going to show you a trick that will help you to classify the content of your app:
how to add categories to your sections.

Depending on the type of content you have on your app, you can add categories to your CMS section or filter your content when using an external source (Youtube , WordPress, etc.).

For the CMS categories you just have to go to the menu My app > Content > Sections. I hover over the section I want to change, I click on the icon with the 3 dots, then Settings.

Here I click directly on ADD A CATEGORY.

I enter a name. 

I do it as many times as I want categories.


I can enter each category to choose the display order of the items inside. 

Let’s return to the previous screen. 

Here I can reorder my categories like this.

I can also make them invisible by clicking on the eye.

Or delete them by clicking on the trash can.

Now if I create a new article, I will find the new categories I created. 

Can you see them?

Easy right?

For external content, it's exactly the same behavior except that they are called filters. You will be able to retrieve the existing filters from your external content and choose their display mode.

Now let's see how to design the categories/filters of your sections.

let’s go to the menu My app > Design > sections Design 

I choose the section in which I created my categories.

 click on the CATEGORIES link.

Here I can set my colors and fonts and choose my display template.

I have three display options: 

- Dropdown (adds a drop-down list just below the navbar displaying the page filters if you click on it)

- Circle Band (adds a scrolling band just below the navbar containing the page categories)

- Pager (adds a "pager" icon in the navbar. One category = one page. You must select another page to see another category). 

I prefer the Circle Band for my app.

Voilà! Now you know how to add categories and filters to your sections and design them ;)

See you soon for another tutorial! 

Related videos