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

Summary blocks

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 or products 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 thumbnail images to every item that will display in the block. It's not possible to add content directly to a summary block.

You can use summary blocks to display:

Portfolio pages and gallery sections aren't supported.

Album pages aren't supported.

Add a summary block

To add a summary block:

  1. Click Edit on a page or post, click an insert point, then click Summary. For help, visit Adding content with blocks.
  2. In the Content tab, choose what content displays.
  3. Click the Design tab to change the layout and edit layout settings.
  4. Click outside the block editor when you're done. Your changes save automatically.

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 thumbnail 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

Keep in mind, you have to add categories and tags or set items as featured within the collection page itself to ensure items appear with these filters. It's not possible to change these settings in the summary block.

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.

Example of a Wall Summary Block.

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.

Example of a Carousel Summary Block.

List summary blocks display items in one column with thumbnail images on one side and text on the other.

Example of a List Summary Block.

Grid summary blocks display items in an even grid. Items with uneven lengths have space between them.Example of a Grid Summary Block.

Edit design settings

In the Design tab of the summary block, you can customize the number of items that display, the alignment of text, and the size of and space between items. 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.

Thumbnail

 

Switch the toggle on to show item thumbnail images in the block. Switch off to hide the item thumbnail 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:

  1. Item thumbnail (for a blog post, product, or event)
  2. Image block (in a blog post or event)
  3. Gallery block (in a blog post or event)

 

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.

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

  • Change the Column Width of columns in the block. This changes the number of items per row and the size of each item
  • Change the Gutter Width of horizontal space/padding between columns. Vertical padding/space between rows adjusts automatically depending on the items in the block, but doesn't correspond to this setting

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 thumbnail images, which affects cropping. Select Auto to display thumbnails 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 thumbnail images, which affects cropping. Select Auto to display thumbnails 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 thumbnail images, which affects cropping. Select Auto to display thumbnails without cropping.
Size and Spacing
  • Change the Column Width of columns in the block
  • Change the Gutter Width of space/padding between items
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 - This option only appears if Show Excerpt is enabled. When this is enabled, Read More links display under post content and above metadata.

Products Page
  • Price - When enabled, product prices appear under product titles.
  • Enable Product Quick View - When switched on, enables product quick view.

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:

  1. Open the summary block editor.
  2. Click Layout and check the Text Size.
  3. Open site styles and click Fonts.
  4. Under Global Text Styles, set the font family in Paragraphs. The font family follows your Paragraphs setting regardless of the summary block's text size.
  5. Set the font size in Headings or Paragraphs based on the summary block's text size:
    • XL - Heading 2
    • L - Paragraph 1
    • M - Paragraph 2
    • S - Paragraph 3

Excerpts and descriptions display at a fixed size, but the XL text setting increases the size of excerpt and description text.

Colors

You can style text colors in the block. To change the colors:

  1. While editing a page, open site styles, then click Colors.
  2. Hover over your color theme and click the pencil icon.
  3. 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

When you're done making style changes, hover over Done and click Save.

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:

  1. Go to your blog page.
  2. Scroll down to your earliest set of 30 blog posts.
  3. Give each one the same easy to remember tag, like batch1.
  4. 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:

  1. In the Content tab, connect the summary block to your blog page.
  2. Click Filter Items and add the tag for your first batch of posts. In our example, you'd add the tag batch1.
  3. 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:

  1. 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.
  2. Upload an image for each individual text item you want, then add the text as the image description.
  3. 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.
  4. In the Design tab of the block editor, disable the thumbnail 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

Summary blocks on mobile may display differently than on a computer, 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.

Was this article helpful?
183 out of 622 found this helpful