Merchandising Category Pages

Sometimes you want to customize content for specific categories, brands, or pages. You can do this using Rules with filters in their conditions.

This guide gives you access to resources and examples to learn how to implement Algolia on your category pages, and use the different rules editors to merchandise your pages.

To use an attribute in a Rule condition with filters, you must first declare it in attributesForFaceting.

Merchandising capabilities

All the strategies (drag & drop, pin or hide items, boost, bury, etc) available for search merchandising are available for category pages too.

You can create rules via API, using the Manual Editor or using the Visual Editor. The Visual Editor is a visual drag and drop interface, made for business teams, with an optimized experience for category merchandising.

If you have several similar Rules, one for each category page for example, it is most efficient to use the API to create and save multiple rules programmatically.

Examples

Displaying a persistent banner on a category page

Imagine you are an ecommerce platform selling electronic devices. When users land on the Smartphones category page, you want to display a banner at the top of the page promoting the latest Galaxy S21.

First, you need to set a Rule that returns the custom data you want to display. Then, you need to display this data on the front end whenever the Rule is triggered.

You can add the Rule using the Algolia dashboard. Then, you can edit your front-end code to retrieve and display the banner.

Using the dashboard

1. Select the Search product icon on your dashboard and then select your index.
2. Select the Rules section from the left sidebar menu in the Algolia dashboard.
3. Under the heading Rules, select the index you are adding a Rule to.
4. Select Create your first rule or New rule. In the dropdown, click on the Manual Editor option.
5. In the Condition(s) section, toggle Filters on and toggle Query off. Select Device Type in the attribute name field, and Smartphone in the attribute value field.
6. In the Consequence(s) section:
   • Click the Add consequence button and select Return Custom Data.
   • In the input field that appears, add the data to return when the user query matches the Rule: { "banner": "Galaxy S 21" }
7. Don’t forget to save your changes.

Retrieving the banner data in the Search UI

Now that your Rule is ready, you can add a banner in your search UI when the userData property is present in the API response. For more information, please see the guide for adding banners with Rules.

Promoting items on a category page until the users begins a search

In the earlier example, the banner is persistent. Even if a user types a search query, it remains in place. Sometimes you want to display a banner when users land on a category page, but not once they’ve begun searching.

For example, imagine you want to promote a mix of the latest flagship devices from all brands on the “Smartphone” category page. Unlike the banner example, you don’t want those items to stay in place when the user types a query. You only want to pin them when the user lands on the page.

For this, you need to create Rule that gets triggered:

• when the user lands on the Smartphones category page—when {"filters":"category:Smartphone"} is included in the query parameters
• if the query is empty

You can add the Rule using either the Manual Editor or Visual Editor in the Algolia dashboard.

Using the Manual Editor

1. Select the Rules section from the left sidebar menu in the Algolia dashboard.
2. Under the heading Rules, select the index you are adding a Rule to.
3. Select Create your first rule or New rule. In the dropdown, click on the Manual Editor option.
4. In the Condition(s) section, keep Query toggled on. In the dropdown, select the value Is and leave the text field empty.
5. Still in the Condition(s) section,toggle Filters on. Select Device Type in the attribute name field, and Smartphone in the attribute value field.
6. In the Consequence(s) section:
   • Click the Add consequence button and select Pin an item.
   • In the input field that appears, select the item to pin in position 1.
   • Repeat this step for other items you want to pin.
7. Don’t forget to save your changes.

Using the Visual Editor

1. Select the Rules section from the left sidebar menu in the Algolia dashboard.
2. Under the heading Rules, select the index you are adding a Rule to.
3. Select Create your first rule or New rule. In the dropdown, click on the Visual Editor option.
4. Click on Set query condition(s). In the section that opens, keep Query toggled on. In the dropdown, select the value Is and leave the text field empty.
5. Still in the Set query condition(s) section,toggle Filters on. Select Device Type in the attribute name field, and Smartphone in the attribute value field.
6. Click on Apply.
7. In the left side panel, click on Pin items :
   • In the input field that appears, select the item to pin in position 1.
   • Click on Pin another item, and repeat those steps for the other items you want to pin.
8. Click Apply and don’t forget to save your changes.