Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Displaying collection items in Summary Blocks

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 what your template offers, 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

To follow these steps, you’ll need a collection page, like a Blog Page or Products Page. To learn more, visit Adding pages to your navigation.

Summary Block layout options

Summary Blocks pull content from collections and display it on other areas of your site. In this example, we’ll use a Regular 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 allows the Summary Block to pull items from the page without visitors seeing duplicate content. For detailed instructions, visit Moving pages around your navigation.

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

Move_to_not_linked.png

Note: Don’t delete this page. Moving it to Not Linked hides it from visitors, but still allows it to feed content to your Summary Block.

Step 2 - Create a Regular Page

Now that the original collection page is hidden from your navigation, you’ll create a Regular 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. Once 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.

Add_Regular_Page.png

Step 3 - Add a Summary Block

Now that you substituted a Regular Page for the original collection page in your site’s navigation, add a Summary Block to display collection content.

First, follow the steps in Summary Block overview 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”.

Select_page.png

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:

  1. Go to your Blog Page.
  2. Scroll down to your earliest set of 30 blog posts. 
  3. Give each one the same tag, for example, batch1.
  4. 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.

batch1-example.png

Step 2 - Add multiple Summary Blocks

On a Regular 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:

  1. In the Content tab, connect the Summary Block to your Blog Page.
  2. In the Display tab, set the Number of Items to 30.
  3. In the Tag Filter field, add the tag for your first batch of posts. In our example, you'd add the tag batch1.
  4. 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.

filter-example.png

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.

Was this article helpful?
3 out of 5 found this helpful
Displaying collection items in Summary Blocks