How to Add Filtering by Models to the Listing Grid in Pages App

Adding a Listing Grid with model-based filtering in the Pages App allows users to easily browse and find relevant items—like vehicles or products—by narrowing results based on model names. This guide walks you through the full setup process, including insights shared in the tutorial video.

Step-by-Step Instructions

1. Access the Pages App

Open your Dashboard

Navigate to Apps → Select Pages

2. Select or Create the Target Page

Choose the page where you want to display your listings.

3. Add a Listing Grid

Go to the Special components section.

Locate the Listing Grid element.

Drag and drop it onto your page—ideally below or above the filter bar depending on your layout preference.

4. Configure the Listing Grid

Make sure the grid:

Is linked to the correct data source (e.g. your car inventory)

Displays the appropriate fields like model, price, image, etc.

5. Bind Model Filters to the Grid

If your page includes a filter UI (like a dropdown or multi-select for car models):

Bind the filter input to the model field in your data source.

Set filter conditions like:

equals → for single-select

is one of → for multi-select

✅ Ensure model names in the filter match the data entries.

7. Save & Refresh

Click Save in the top-right corner of the editor.

Go to the live website and refresh the page to view the updated grid.