Gather sets of content, like blog posts or events, from your collection pages and display them in unique layouts elsewhere on your site.
Use summary blocks to display content from certain collection pages, such as blog posts or products, in a variety of layouts.
Summary blocks are great for:
- Highlighting collection items on your homepage.
- Displaying blog posts, products, or videos in a layout that isn't available otherwise.
- Changing the layout of your content without making drastic style changes.
- Adding links to related content at the end of a blog post or product details page.
- Creating recipe or content indexes.
Watch a video
What content displays
Summary blocks pull content from certain collection pages on your site. Before adding the block, add content to a supported collection page. For the best display, add featured images to every item you want to display in the block. It's not possible to add content directly to a summary block.
You can use summary blocks to display:
- Blog posts from blog pages
- Events from events pages
- Products from store pages
- Videos from videos pages
Portfolio pages and gallery sections aren't supported.
- Blog posts from blog pages
- Events from events pages
- Images and videos from gallery pages
- Images and videos from project pages
- Products from store pages
Album pages aren't supported.
Add a summary block
To add a summary block:
- Click Edit on a page or post, click Add Block or an insert point, then click Summary. For help, visit Adding content with blocks.
- Open the block editor by clicking the pencil icon on the block.
- In the Content tab, choose what content displays.
- Click the Design tab to change the layout and edit layout settings.
- Click outside the block editor when you're done.
- Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
For more detailed information about each step, follow the sections below.
Choose the content
In the Content tab of the summary block editor, click Select a Page to choose the page to feature in the block. As you click a page, you'll see its content populate the summary block.
For events pages, you can choose an Event Time Frame to display either Upcoming events or Past events.
Keep in mind:
- You can only feature content from one page per summary block. However, you can add multiple blocks to a page to feature all of the content you want.
- You can change the page that summary blocks pull content from at any time.
- The title text links to the content directly. The images also link to the content, except for gallery page and project page images on version 7.0, which open in a lightbox on the summary block page.
Choose metadata
Click Primary Metadata and Secondary Metadata to choose information to display most prominently with each item:
- Depending on the item, you can select Date Posted, Event Date, Event Time, Category, Tags, Author, Location, Comments, or None.
- Placement of this information varies by layout.
- If an item doesn't have the metadata you select, it won't display with the item. For this reason, we recommend filling out all fields in every collection item if you want this information to display in the block.
Filter the content
Click Filter Items to apply different filters to the content pulled from the collection:
- Category - Select a category to only display content in that category
- Tag - Select a tag to only display content with that tag
- Featured Only - Switch this toggle on to only display content designated as featured, like featured blog posts or videos
Keep in mind:
- You have to add categories and tags or set items as featured within the collection page itself. It's not possible to change these settings in the summary block.
- If a category or tag only appears on an unpublished item, it won't appear as an option in the summary block filters.
- In version 7.1, you can only filter store page summary blocks by one category at a time.
Summary block layouts
There are four summary blocks, and their behavior is consistent across all sites. You can change the layout in the Design tab of the summary block. As you choose a layout, you'll see a preview of it on the page. Here are examples of blog posts in each layout.
Wall summary blocks display items in a masonry style grid. Instead of even rows, the wall layout displays items in offset rows based on the size of the content, creating a mosaic look.
Carousel summary blocks display a set number of items in a row, with navigation arrows in the top-right corner for scrolling through more content.
List summary blocks display items in one column with images on one side and text on the other.
Grid summary blocks display items in an even grid. Items with uneven lengths have space between them.
Edit design settings
In the Design tab of the summary block, you can customize the number of items that display, the alignment of text, the size of and space between items, and the appearance of the block. As you change the settings, you'll see a preview of your changes on the page.
All layouts include the following options:
Design option | Use this to |
Number of Items |
Set the number of items to display in the block. You can display up to 30 items. |
Text |
Choose the size of the text to S, M, L, XL (not available in wall layout). The XL setting also increases the size of excerpts and descriptions. Choose the alignment of the text to Left, Center, or Right. |
Title |
Switch the toggle on to show item titles in the block. Switch off to hide the item titles. |
Featured Image
|
Switch the toggle on to show item images in the block. Switch off to hide the item images. When displaying gallery page or project page images, the image displays in the block. When displaying blog posts, events, or products, the block will pull the first available image on this list:
|
Excerpt |
Switch the toggle on to show item excerpts or descriptions in the block. Switch off to hide the item excerpts or descriptions. When displaying blog posts, the excerpt displays in the block. When displaying events, gallery page images, products, or project page images, the item description displays in the block. |
Metadata Position |
Select the location of the item metadata, like a date or author, to Above Title, Below Title, or Below Content. Select the type of metadata that appears in the Content tab. |
Background (version 7.1 only) |
Switch the toggle on to add a background color to the block, set the corner radiuses, and change the background padding. |
Stroke |
Enable a solid or dotted line outlining the block. For both solid and dotted lines, set the stroke Color and Thickness. |
Blend Mode |
Use the dropdown menu to choose a transparency setting. These effects are ideal if you're overlaying a summary block in front of an image or other visual content. |
Blur |
Switch the toggle on to blur either the Element or Backdrop, and use the slider to adjust the level of blurriness. |
Stroke, Blend Mode, and Blur customizations are available for Fluid Engine sections. For sections using the classic editor, only Stroke is available.
Layout-specific options
Each summary block has additional design options specific to its layout.
Here are the design options for wall summary blocks:
Design option | Use this to |
Size and Spacing |
|
Here are the design options for carousel summary blocks:
Design option | Use this to |
Items Per Row |
Set the number of items to display at a time. You can choose between 1 and 5. |
Aspect Ratio |
Select the aspect ratio for images, which affects cropping. Select Auto to display images without cropping. |
Header Text |
Add a custom title to display above the block. This way, you can avoid adding a separate text block. |
Here are the design options for list summary blocks:
Design option |
Use this to |
Aspect Ratio |
Select the aspect ratio for images, which affects cropping. Select Auto to display images without cropping. |
Image Alignment |
Align images to the Left or Right of the text. |
Here are the design options for grid summary blocks:
Note: Gallery page and project page images in this layout open in lightbox slideshows. Clickthrough URLs disable the lightbox.
Design option | Use this to |
Aspect Ratio |
Select the aspect ratio for images, which affects cropping. Select Auto to display images without cropping. |
Size and Spacing |
Note: Items in grid summary blocks are left-aligned, and a narrow column width may cause extra space on the right side of the block. |
Tip: Summary block caption styles vary depending on your site.
Item-specific options
Depending on the type of collection items you display in your summary block, you may see additional options.
Collection type | Additional design options |
Blog page |
Read More Link - When this is enabled, Read More links display under post content and above metadata. Read More links won't display if the Excerpt toggle is disabled. |
Store page |
|
Videos pages |
Description - When enabled, video descriptions appear under video titles |
Style summary block text
Your summary block style options depend on your site's version.
Fonts
The title size follows your site's global fonts. To change the font family and title size:
- Open site styles, then click > next to Fonts.
- Click Assign Styles, set the font family and text size in Paragraphs.
Keep in mind:
- Any changes made to Paragraph sizes will affect all summary blocks on your site with the corresponding text size setting and any other content using the same font styles.
- Excerpts and descriptions display at a fixed size.
Colors
You can style text colors in the block. To change the colors:
- While editing a page, open site styles, then click > next to Colors.
- Hover over your color theme and click the pencil icon.
- Under Summary Block, change the colors with these tweaks:
- Header Text Color
- Title Color
- Excerpt Color
- Read More Color
- Primary Metadata Color
- Secondary Metadata Color
If you have a background color enabled, use the tweaks that include on Background instead. You can also change the background color here with the Background tweak.
When you're done making style changes, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
Use site styles to set the Summary Block Title Font and Summary Block Title Color in these template families:
- Adirondack
- Avenue
- Aviator
- Bedford
- Momentum
- Montauk
- Pacific - Title Font and Title Color
Excerpts and descriptions display at a fixed size, but the XL text setting in the summary block's design tab increases the size of excerpt and description text.
It's not possible to change the size of the Header Text that appears above the block in the carousel layout.
Replace a collection page with summary blocks
In some cases, like when a template on version 7.0 has a fixed blog layout, you may want to use summary blocks to display collection items in different layouts. The following steps show how to use a summary block to replace your collection page layout.
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
After hiding the original collection page from your navigation, 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.
Step 3 - Add a summary block
Add a summary block to the layout page you substituted in your navigation. In the summary block, select the collection page you moved to Not linked in step 1.
Customize the summary block with the content settings and block layout. If your collection page has more than 30 items, you can add more summary blocks to display more than 30 items.
Display more than 30 items
Summary blocks can't display more than 30 items. To display more items, you can add multiple summary blocks to the same page 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 easy to remember tag, like batch1.
- Scroll up to the next batch of 30 blog posts. Give each of these a different tag, like batch2.
Continue tagging batches of 30 in this way until you've tagged all your blog posts. To learn more about adding tags, visit Categories and tags.
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
For the bottom summary block:
- In the Content tab, connect the summary block to your blog page.
- Click Filter Items and add the tag for your first batch of posts. In our example, you'd add the tag batch1.
- In the Design tab, set the Number of Items to 30.
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, then add a summary block to the top of the page with a filter for that tag.
Display text items without images (version 7.0)
If your site is on version 7.0 and you want to display items of text without images, you can use a summary block with a gallery page. This is a great option for testimonials, reviews, or other sets of content that don't need accompanying images.
To do this:
- Create a gallery page specifically for the text content you want to display in a summary block and place it in the Not linked section of your pages panel.
- Upload an image for each individual text item you want, then add the text as the image description.
- Add a summary block to the page where you want to display the text and connect it to the gallery page you created in step 1.
- In the Design tab of the block editor, disable the images so only text displays.
Alternatively, you can create columns and rows with text blocks and quote blocks for a similar text-focused layout. If your site is on version 7.1, we recommend using auto layouts to display text-only items.
Summary blocks on mobile
In Fluid Engine, summary blocks display the same on mobile devices as they do on computers. In the classic editor, summary blocks may display differently on mobile, depending on the layout.
Wall summary blocks display in a stacked layout, but images retain their individual aspect ratios.
Carousel summary blocks retain their carousel layout and display two items at a time.
List summary blocks display the same on mobile.
Grid summary blocks display in a stacked layout.