All templates have a built-in design for collection pages that determines how content displays. For example, many Blog Pages have a classic layout where posts display in a horizontal list. To create a layout beyond your template's built-in design, use a Summary Block.
This guide will show you how to use a Summary Block to display existing content from a collection page. We’ll use a Blog Page as an example, but you can use any type of collection page except Album Pages.
Before you begin
Summary Block layout options
Summary Blocks pull content from collections and display it on other areas of your site. In this example, we’ll add the Summary Block to a Layout Page.
Summary Blocks display up to 30 items and have four layout options:
- Wall - A popular option that displays content in a masonry, mosaic-like layout
- Carousel - Displays content in a slideshow format, helping visitors interact with your collection
- List - Displays content in a linear design with thumbnail images on one side and text on the other
- Grid - A popular option that displays content in an even grid, which lets you recreate built-in collection designs from some templates like Flatiron and Avenue
Step 1 - Move your collection to Not Linked
To hide the original collection page from your navigation menus, drag it to your Not Linked section. This way, the Summary Block can pull items from the page without visitors seeing duplicate content. For detailed instructions, visit Moving pages around your navigation.
After the page is in Not Linked, you’ll continue to add new content here, like blog posts or products, which will display in the Summary Block you’re going to build.
Note: Don’t delete this page. Moving it to Not Linked hides it from visitors, but still feeds content to your Summary Block.
Step 2 - Create a Layout Page
Now that the original collection page is hidden from your navigation, you’ll create a Layout Page in your Main Navigation as a substitute so visitors can find your collection content.
This is the page that will display your collection items to visitors. After you set up this page, it updates automatically every time you update the hidden collection page.
Note: Give the new page the same name as the original collection page.
Step 3 - Add a Summary Block
Now that you substituted a Layout Page for the original collection page in your site’s navigation, add a Summary Block to display collection content.
First, follow the steps in Using Summary Blocks to add the Summary Block and select your layout.
In the Content tab of the Summary Block Editor, select the collection page you moved to Not Linked in Step 1.
We set the example Summary Block in our screenshot to highlight blog posts from the Blog Page "Blog”.
Step 4 - Customize the Summary Block
After you add the Summary Block, you can filter the content that displays based on specific criteria. For example, you can customize the number of items that display, tags and categories, and what primary information displays (like item title, thumbnail, and excerpt). You can also switch between designs if you want a different layout.
Displaying more than 30 items
Summary Blocks can't display more than 30 items. To display more items, you can stack multiple Summary Blocks on top of each other and use tags to choose which items display in each one.
In this example, we’ll use a Blog Page.
Step 1 - Tag batches of posts
First, give each set of 30 blog posts a unique tag:
- Go to your Blog Page.
- Scroll down to your earliest set of 30 blog posts.
- Give each one the same tag, for example, batch1.
- Scroll up to the next batch of 30 blog posts. Give each of these a different tag, for example, batch2.
Continue tagging batches of 30 in this way until you've tagged all your blog posts. To learn more about adding tags, visit Adding tags and categories.
Tip: Edit each blog post individually. There isn't currently a way to tag multiple posts at the same time.
Step 2 - Add multiple Summary Blocks
On a Layout Page, add a Summary Block for each batch. For example, if you have 90 blog posts, that would be three batches of 30, so you'd add three Summary Blocks.
Step 3 - Filter each Summary Block by a tag
Then, for the bottom Summary Block:
- In the Content tab, connect the Summary Block to your Blog Page.
- In the Display tab, set the Number of Items to 30.
- In the Tag Filter field, add the tag for your first batch of posts. In our example, you'd add the tag batch1.
- Click Apply, then Save and refresh the page.
The first thirty posts will appear in this Summary Block.
Continue updating each Summary Block with the unique tag for a batch. In our example, you'd filter the middle Summary Block with batch2, and the top Summary Block with batch3.
Step 4 - Continue tagging posts and adding Summary Blocks
As you add more content to your site, continue tagging each post in batches of 30. When you start a new batch, add a new Summary Block and filter it with the new tag.
In our example, when you add your 91st blog post, you'd tag it batch4, and then add a Summary Block to the top of the page with a filter for that tag.