Adding a filter to your blog index page (Free Addon)

Recipe Kit's blog filter feature allows your users to filter down and find exactly the type of recipes they want to view. Combine it with the recipe search bar to give visitors multiple ways to discover recipes.

Example

How to enable the Recipe Kit filter

Open your theme editor by clicking "Customize" on your current main theme.
Navigate to your Blog template (with the dropdown menu at the top of the editor).
Click "Add Section" and open the "Apps" tab. There you will see "Recipe Kit Filter" in the list.
Drag the app section to wherever you'd like on the template (likely at the top of the page).
Click on the "Recipe Kit Filter" section, and change the filter settings on the right side-bar of the page.
Ensure you Save the template at the top right corner of the page.

Recipe Search Bar

The filter section includes an optional recipe search bar that lets visitors search for recipes by title, ingredients, tags, and more.

Enabling the search bar

In the filter section settings, check the "Enable recipe search bar" checkbox. A search input will appear alongside your filters.

How it works

Visitors type at least 2 characters and results appear automatically after a short delay.
Each result shows a thumbnail image and recipe title.
Clicking a result (or pressing Enter) navigates directly to that recipe.
Full keyboard navigation is supported: arrow keys to move through results, Escape to close.
The placeholder text defaults to "Search recipes..." but can be customized in the Translations section of the filter settings.

Recipe Kit Filter Settings

There are several settings available to customize the filter on your blog index page.

Alignment

Changing this setting adjusts where (left, center, or right) on the page the filter will display.

Place filter below H1

Checking this checkbox will attempt to insert the filter below your blog title (H1 tag). If it doesn't find an appropriate place to put it, it will likely display at the top of your page.

Accent Colour

Sets the highlight colour used for active filter states and focus indicators. This colour applies to the search bar, filter dropdowns, and the searchable filter inputs.

Hide Empty Options

When enabled (on by default), filter options that don't match any posts in the current blog are automatically hidden. This keeps your filter dropdowns clean and avoids showing options with zero results.

Filters

The filter settings allow you to configure up to 3 different filter groups.

Filter Name

The filter name is what "type" of filter you are specifying. For example, "Diet", "Cuisine", "Difficulty", etc.

Filter Tags

The tags must be a comma-separated, lowercase list of tags that you use on your blog posts or recipes. An example of this would be:

vegan, vegetarian, gluten-free, keto, sugar-free

If your filters don't show up, you need to ensure that the tags in this section match 100% the same naming convention and style as the tags you use in your recipes.

Filter Style

Each filter can be displayed in one of two styles:

Dropdown (default): A standard dropdown menu. Includes an "All" option at the top to clear the selection.
Searchable: A combobox-style input that lets visitors type to narrow down the available options. As the visitor types, only matching tags are shown. This is especially useful for filters with many options (for example, a long list of cuisines or ingredients). Visitors can use arrow keys and Enter to select, or click an option directly. If no tags match what they typed, a "No matches" message is displayed.

Translations

You can customize the text labels used by the filter and search bar:

Search placeholder: The placeholder text shown inside the search input (default: "Search recipes...").
"All" label: The text for the "All" option in dropdown filters (default: "All").
"Clear" label: The text for the clear/reset button that appears when filters are active (default: "Clear").