Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.

Why: The Content Grid block allows you to showcase various types of content in a visually appealing way, enhancing your app's user experience. By configuring this block effectively, you can help your members discover content that matters to them.

Navigate: App Station > Pages & Menu > Add Block > Content Grid

Quick Start

Click Add Block on your page.
Select Content Grid from the list.
Choose the content type you want to display (e.g., Recipes, Meal Plans).
Configure the layout (Grid or List) and set any filters or sorting options.
Click Save to publish your changes.

Overview

The Content Grid block is a versatile component for displaying various content types, including recipes, meal plans, resources, challenges, blog posts, and Shopify products. You can choose between a grid or list layout, apply filters, and enable search functionality to enhance member engagement.

Key Features

Multiple Content Types: Display recipes, meal plans, resources, and more.
Layout Modes: Choose between grid (columns) or list (compact rows).
Filtering and Sorting: Use advanced filters and sorting options to help members find content easily.
Search Functionality: Enable search to allow members to quickly locate specific content.
Live Preview: See real-time changes as you configure the block.

Configuration

Basic Properties

You can customize the Content Grid block using the following properties:

Content Type: Select the type of content to display (e.g., RECIPE, MEAL_PLAN).
Layout: Choose between grid or list.
Title: Optional header title for the grid.
Limit: Set the maximum number of items to display.
Card Size: Adjust the size of the content cards (e.g., medium, small).

Filtering Options

You can filter the content displayed in the grid using these properties:

Category ID: Filter by specific collection IDs.
Tags: Filter by tag IDs to show only relevant content.
Sort By: Choose how to sort the content (e.g., newest, popular).
Featured First: Option to show featured items at the top.

Search Properties

To enhance search capabilities, configure the following:

Enable Search: Toggle to enable or disable search functionality.
Show Advanced Filters: Allow members to access advanced filtering options.
Search Behavior: Control how the grid responds to search queries:
- respond: Filters content based on search.
- hide: Hides the grid during a search.
- ignore: Always shows original content.
- search-only: Only appears when a search is active.

Example Configuration

Here’s an example of how to set up a Content Grid block for recipes:

{
  "blockType": "content-grid",
  "config": {
    "contentType": "RECIPE",
    "layout": "grid",
    "cardSize": "medium",
    "limit": 12,
    "sortBy": "newest",
    "enableSearch": true,
    "showAdvancedFilters": true
  }
}

Layout Modes

Grid Layout

When using the grid layout, items will display in a responsive grid format. The cardSize property controls how many columns are displayed based on the screen size.

List Layout

In the list layout, items are displayed in a single column, optimized for reading. The cardSize property is not applicable in this layout.

Search Controls

Each content type has specific search controls. For example, recipe searches can include filters for ingredients, cooking time, and nutrition values.

Base Filter Behavior

Base filters (like tags or category IDs) are always applied, ensuring that user searches operate within a focused subset of content. For instance, if you set a base filter for vegetarian recipes, all searches will only return vegetarian options.

Content Grid Block