Blog content

Featured links

1. Shopify documentation on customizing sections
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on the filter group block
4. Company XYZ documentation on headers settings
5. Company XYZ documentation on cards settings
6. Company XYZ documentation on section padding settings
7. Company XYZ documentation on section backgrounds settings
8. Company XYZ documentation on separators settings
9. Company XYZ documentation on layout widths settings
10. Shopify documentation on theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Display your blog posts in a configurable archive layout with options for sorting, filtering, and card presentation. It works best on blog landing pages where readers need to scan a larger set of posts quickly and refine what they want to read.

Grid interface settings

These settings control the overall browsing experience for the post grid. You can define the default number of columns on desktop and mobile, choose how many posts appear per page, and decide whether readers can adjust the grid size themselves.

Use a more open grid when post images are important to discovery. Use a denser grid when your blog is text-led or when readers benefit from seeing more titles at once.

The sticky interface keeps the archive controls visible while readers scroll. This is useful for long blog indexes, but it can feel unnecessary on smaller archives where the controls only need to be used once.

Sorting helps shape how readers encounter your content. Date-based sorting usually suits active blogs, while title sorting can work better for reference-style, evergreen, or alphabetical content. For a broader overview of how archive sections are managed, see Shopify documentation on customizing sections

Tip

If you enable the grid size interface, set a sensible default first. Reader controls work best when the starting layout already feels natural.

Filter settings

These settings add tag-based filtering to the blog archive. They are most useful when your posts already follow a clear tagging structure and you want readers to narrow results without leaving the page.

The main filter toggle turns filtering on for the section, while the open-by-default setting controls whether the filter area starts expanded. Leaving filters open can encourage discovery, but a collapsed start often keeps the page cleaner.

Filters work best with consistent, purposeful tags. If tagging is incomplete or inconsistent, the filter experience can feel confusing rather than helpful.

Card color settings

These settings override the usual card color treatment for this section. Use them when your blog archive needs a distinct visual style or when your chosen card layout needs stronger contrast.

Banner overlay settings apply only when you use the Banner card style. If you are not using banner cards, focus on the general card background, border, heading, and text colors instead.

Overlay opacity is especially important on image-led cards. Too little overlay can make titles hard to read, while too much can make cards feel heavy or muted.

Color settings

These settings control the section-level icon, heading, and supporting text colors. They are helpful when this blog archive sits on a custom background or needs to stand apart from surrounding sections.

Adjust these colors together rather than one at a time so the header still feels cohesive. If you also use a background image, gradient, or video, recheck contrast on both desktop and mobile.

Supported block types

1. Filter group

Filter group

Use Filter group blocks to create custom tag-based filter modules within the archive. Each block becomes its own expandable group, which helps you organize filters into clearer categories instead of showing one long list. For general editor behavior, see Shopify documentation on sections and blocks

1. Add a short, plain-language title so readers immediately understand what the group contains.
2. Keep the tag list focused and intentional, especially if you plan to stack multiple groups.
3. Use the block’s open-by-default option selectively so the filter area does not feel crowded.

For block-specific details, see the Filter group block.

Standard section settings

Header settings

Header settings let you introduce the archive with an optional icon, caption, heading, supporting text, and button. This is useful for giving the blog page context, improving page structure, and directing readers to a featured destination.

Keep the heading clear and descriptive. Use the button only when it supports the archive, such as linking to a featured post, a related page, or a newsletter destination.

Card settings

Card settings control how each post appears in the grid, including image treatment, text visibility, alignment, captions, and card button style. These settings override broader card defaults for this section only.

Choose a card style based on how image-led or text-led your blog is. Showing title and excerpt usually supports discovery best, while tighter title-only layouts work well when post titles already do most of the work.

Padding settings

Padding settings control the space above and below the section. Use them to separate the archive from nearby sections or tighten the page when the blog grid already has enough breathing room.

If you add a larger header or a strong background treatment, a little more padding can help the section feel intentional. On mobile, slightly reduced spacing often keeps the page easier to scan.

Section background settings

Section background settings let you place a color, gradient, image, or video behind the archive. This can help the section stand out, but it also affects readability and perceived spacing.

Use overlays to maintain contrast for headings and cards. If you set separate mobile media, check that the crop and focal area still support the content well.

Caution

Strong background media can make a busy blog archive harder to scan. If readability drops, simplify the background or increase overlay contrast before changing card content.

Separator settings

Separator settings add a line at the top or bottom of the section. They are useful when you want a clearer visual boundary without adding much more spacing.

Use separators when neighboring sections have similar backgrounds or similar card density. If the archive already stands apart clearly, you may not need them.

Width settings

Width settings control the maximum width of the archive content and the width of the section wrapper. These settings are especially useful for balancing readability, card density, and background presentation.

A narrower content width can make excerpts easier to read, while a wider setting can fit more cards comfortably on large screens. When adjusting section width for background treatments, preview the live page as well as the editor. For editor controls, see Shopify documentation on theme editor

Usage notes

1. Match the grid to the content. Use fewer columns when images and excerpts matter, and denser layouts when readers mostly browse by title.
2. Use filters intentionally. Turn on filtering only when your tags are consistent, recognizable, and worth browsing by.
3. Keep cards easy to scan. Show only the text, captions, and button treatment that help readers choose a post quickly.
4. Check mobile separately. Review grid size, filter behavior, button placement, and background media on smaller screens before publishing.
5. Preview real page width. Recheck spacing, sticky controls, and content width on the live page so the archive feels balanced in actual browsing conditions.
6. Test block content with the section. Added blocks can change the archive’s layout and emphasis, so confirm the final result after you add or reorder them.
7. Leave fallback styling intact when needed. Blank or default-style colors usually preserve the section’s existing look, while stronger overrides and separate media make the area feel more independent.