Guides / Managing results / Rules / Merchandising and promoting items

Merchandising Category Pages

Sometimes you want to customize content or display banners for specific categories, brands, or pages. You can do this using Rules with filters in their conditions. This guide outlines how to use these types of Rules to persistently display a banner on a category page and how to pin items on a category page when the user hasn’t typed anything yet.

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

Displaying a persistent banner on a category page

Imagine you are an e-commerce platform selling electronic devices. When users land on the “Smartphone” 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 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, toggle Filters on and toggle Query off. Select Device Type in the attribute name field, and Smartphone in the attribute value field.
  5. 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" }
  6. 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.

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 condition. 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 condition 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.

Did you find this page helpful?