How to Set Up the Blog Category Template in Maison

The Blog category template in Maison controls the page customers see when they open a blog category on your storefront.

docs__maison__how-to-set-up-the-blog-category-template-in-maison__01.webp

Unlike the addable Blogs section, which showcases selected blog posts on other pages, the Blog category template is designed specifically for browsing all posts within the current blog category.

The default Maison Blog category template contains two main sections:

  • Blog category banner
  • Blog category

Together, they provide:

  • Breadcrumb navigation
  • The current Blog category title
  • Tag filtering
  • Blog post cards
  • Responsive columns
  • Pagination
  • Section colors and spacing

Template structure

The default structure is:

Blog category template
├── Blog category banner
│   ├── Breadcrumb
│   ├── Title
│   └── Tag filter
│
└── Blog category
    └── Blog card
        ├── Blog info
        │   ├── Title
        │   ├── Author date
        │   ├── Summary
        │   └── View more
        └── Cover image

In the default Maison template:

  • Author date is disabled.
  • The additional Title block inside the Blog category section is disabled.
  • Blog posts are displayed using the configured Blog card.
  • Pagination is generated automatically when the number of posts exceeds the Blogs per page setting.

STEPS:

1. Open the Blog category template

To customize the Blog category page:

  • Open the Maison theme editor.
  • Open the template selector.
  • Select the Blog category template.
  • Configure the Blog category banner.
  • Configure the Blog category section.
  • Customize the Blog card.
  • Click Save.
docs__maison__how-to-set-up-the-blog-category-template-in-maison__02.webp

The content shown on the storefront changes dynamically according to the Blog category the customer is currently viewing.

2. Configure the Blog category banner

The Blog category banner appears above the list of blog posts.

It supports:

  • Breadcrumb
  • Title
  • Tag filter
docs__maison__how-to-set-up-the-blog-category-template-in-maison__03.webp

The default structure is:

Blog category banner
├── Breadcrumb
├── Title
└── Tag filter

You can reorder or remove these blocks depending on the layout you want.

3. Configure the Breadcrumb

The Breadcrumb block helps customers understand where they are in the storefront hierarchy.

It can display navigation leading to the current Blog category page.

Use the Breadcrumb block settings to configure its alignment and other standard Maison breadcrumb options.

The default Blog category template centers the Breadcrumb on both desktop and mobile.

4. Configure the Blog category Title

The Title block displays the title of the current Blog category automatically.

For example, if the current category is:

Journal

the Title displays:

Journal

You do not type the Blog category name into this block manually.

Available Title settings include:

  • Title size
  • Title tag
  • Text alignment
  • Mobile text alignment

The default Title tag is:

H1

and the default alignment is centered.

5. Add the Tag filter

The Tag filter lets customers filter posts within the current Blog category.

Maison generates the filter automatically from the tags available in that Blog category.

docs__maison__how-to-set-up-the-blog-category-template-in-maison__09.webp

For example, if posts use these tags:

Design
Guides
Inspiration
News

Maison can display:

All | Design | Guides | Inspiration | News

Customers can select a tag to view only posts carrying that tag.

6. Understand Tag filter behavior on desktop and mobile

Maison uses different Tag filter layouts depending on screen size.

Desktop

On larger screens, tags are displayed as navigation links.

For example:

All   Design   Guides   Inspiration   News

The active filter receives the active state.

Mobile

On smaller screens, Maison changes the Tag filter into a dropdown selector.

docs__maison__how-to-set-up-the-blog-category-template-in-maison__10.webp

For example:

[ All                       ▼ ]

Customers can select a tag from the dropdown and Maison opens the matching filtered Blog category page.

This behavior is automatic.

7. Understand when the Tag filter appears

The Tag filter is displayed only when the current Blog category contains tags.

If the Blog category has no tags:

  • Maison does not display the Tag filter.
  • The Blog category page continues to display the post list normally.

To make a tag appear in the filter, assign that tag to one or more posts in the Blog category.

8. Configure Transparent header behavior

The Blog category banner supports Maison's Transparent header controls.

Available settings include:

  • Transparent header
  • Transparent header color
  • Solid header on mobile

Use these settings when you want the Header to visually integrate with the Blog category banner.

If Transparent header is disabled, the Header uses its normal storefront appearance.

9. Configure Blog category banner colors

Enable Color override when the Blog category banner should use its own colors.

Available controls include:

  • Text color
  • Background color
  • Background gradient
  • Button text color
  • Button background color
  • Button gradient

If Color override is disabled, the banner follows Maison's normal theme colors.

10. Configure Blog category banner width and spacing

Available Section width options are:

  • Narrow
  • Page
  • Fluid
  • Full

Default:

Page

The Blog category banner also includes:

  • Section divider
  • Layout
  • Spacing

The default banner layout centers its blocks vertically.

The default section spacing is approximately:

Desktop:
80px top
80px bottom

Mobile:
40px top
40px bottom

The default template adjusts this spacing so the Blog category banner uses:

Desktop:
60px top
0px bottom

Mobile:
40px top
0px bottom
11. Configure the Blog category section

The Blog category section displays the posts belonging to the current Blog category.

docs__maison__how-to-set-up-the-blog-category-template-in-maison__04.webp

Available section settings include:

Setting Description
Blogs per page Controls how many blog posts appear before pagination.
Columns Controls the desktop Blog card columns.
Mobile columns Controls mobile columns.
Custom spacing Enables custom gaps between Blog cards.
Horizontal spacing Controls horizontal card spacing.
Vertical spacing Controls vertical card spacing.
Color override Applies section-specific colors.
Section width Controls the content width.
Section divider Adds a section divider.
Layout Controls section block layout.
Spacing Controls section spacing.
12. Set Blogs per page

Use Blogs per page to control how many posts are displayed on each page.

Available range:

2–50

Default:

6

For example:

Blogs per page: 6

If the current Blog category contains 15 posts, Maison displays them across multiple pages.

Example:

Page 1 → 6 posts
Page 2 → 6 posts
Page 3 → 3 posts

Maison generates the Pagination automatically.

13. Understand Pagination

Pagination appears automatically when the Blog category contains more posts than the configured Blogs per page value.

You do not need to add a Pagination block manually.

For example:

Blogs per page: 6
Total posts: 14

Maison creates the required additional pages automatically.

The pagination appears below the Blog card grid.

If all posts fit on one page, additional pagination controls are not required.

14. Configure desktop Columns

Use Columns to control the number of Blog cards displayed per row on larger screens.

Available range:

1–3 columns

Default:

2 columns

Recommended examples:

Columns Recommended use
1 Large editorial Blog cards
2 Spacious Maison-style Blog category layout
3 More compact Blog listing

The default Maison Blog category template uses:

2 columns
15. Configure Mobile columns

Available Mobile columns values are:

1
2

Default:

1

Use 1 column when you want larger, easier-to-read Blog cards on mobile.

Use 2 columns when you want a more compact mobile Blog grid.

Unlike the addable Blogs section, the Blog category template uses a standard paginated grid rather than a mobile carousel.

16. Customize spacing between Blog cards

Enable Custom spacing to override Maison's default card-grid spacing.

Available ranges:

Horizontal spacing: 0–100px
Vertical spacing:   0–100px

Default custom values:

Horizontal spacing: 48px
Vertical spacing:   48px

The default Blog category template enables Custom spacing and uses:

Vertical spacing: 60px

Use larger vertical spacing for a more editorial layout.

17. Configure the Blog card

The Blog category section supports one Blog card.

Maison reuses that Blog card structure for every post displayed on the current page.

The Blog card supports:

  • Cover image
  • Blog info
docs__maison__how-to-set-up-the-blog-category-template-in-maison__05.webp

The default template orders them as:

Blog card
├── Blog info
└── Cover image

You can reorder these blocks in the Theme Editor if you prefer the Cover image above the Blog info.

The Blog card also includes:

  • Layout
  • Spacing
  • Size
18. Configure Blog info

The Blog info block can contain:

  • Title
  • Author date
  • Summary
  • View more

Each block can be added once.

The default Blog category template contains:

Blog info
├── Title
├── Author date — Disabled
├── Summary
└── View more
docs__maison__how-to-set-up-the-blog-category-template-in-maison__06.webp

Blog info also includes Layout and Spacing settings.

19. Configure the Blog Title

The Title block displays the current blog post title.

The title automatically links to the corresponding Blog post page.

Available settings include:

  • Title size
  • Title tag
  • Maximum rows

Maximum rows options are:

  • Unlimited
  • 1 row
  • 2 rows
  • 3 rows

Use Maximum rows when you want Blog cards with long titles to remain visually consistent.

20. Configure Author date

The Author date block can display:

  • Author
  • Published date

Available settings include:

  • Text size
  • Show author
  • Show date

Both Show author and Show date are enabled by default when the block itself is enabled.

In the default Blog category template, the Author date block is present but disabled.

Enable it if you want metadata such as:

By Maison
Posted on Oct 7, 2026
21. Configure the Summary

The Summary block displays the blog post excerpt.

Available settings include:

  • Text size
  • Maximum rows

Maximum rows options are:

  • Unlimited
  • 1
  • 2
  • 3
  • 4

The Summary comes from the post's excerpt data.

22. Configure View more

The View more block adds an additional link to the Blog post page.

Available settings include:

  • Text
  • Text size
  • Open in new tab
  • Hide on mobile
  • Spacing

If the Text field is empty, Maison uses its default translated text:

Read more

In the default Blog category template:

Open in new tab: Enabled
Hide on mobile: Enabled

and the block has approximately:

20px top spacing
23. Configure the Cover image

The Cover image block displays the Blog post's featured image.

docs__maison__how-to-set-up-the-blog-category-template-in-maison__07.webp

Available Aspect ratio options are:

  • Adapt to image
  • 1:1
  • 2:3
  • 4:3
  • 3:4
  • 3:2
  • 5:4
  • 16:9

The default Blog category template uses:

16:9

Available Image fit options are:

  • Cover
  • Contain

The Cover image itself links to the Blog post page.

If the post does not have a Cover image, Maison displays a placeholder.

24. Display the date on the Cover image

The Cover image includes Show date.

When enabled, Maison displays the post's published date over the Cover image.

In the default Blog category template:

Show date: Enabled

This is independent from the Author date block.

You can therefore:

  • Show the date on the Cover image only
  • Show it through Author date only
  • Show it in both locations
  • Hide it from both locations
25. Customize Blog cards globally

Maison provides additional global styling under:

Theme settings > Blog cards
docs__maison__how-to-set-up-the-blog-category-template-in-maison__08.webp

Available Card styles are:

  • Normal
  • Card

You can also configure:

Border

  • Border thickness: 0–12px
  • Border opacity: 0–100%
  • Border radius: 0–50px

Shadow

  • Shadow opacity: 0–100%
  • Horizontal offset: -12px to 12px
  • Vertical offset: -12px to 12px
  • Blur: 0–60px
26. Configure Blog category section colors

Enable Color override when the Blog category post area should use custom colors.

Available controls include:

  • Text color
  • Background color
  • Background gradient
  • Button text color
  • Button background color
  • Button gradient

If Color override is disabled, the section follows the theme's standard colors.

27. Configure Section width and spacing

Available Section width options are:

  • Narrow
  • Page
  • Fluid
  • Full

Default:

Page

The Blog category section also includes:

  • Section divider
  • Layout
  • Spacing

Default section spacing is:

Desktop:
80px top
80px bottom

Mobile:
40px top
40px bottom

The default Maison Blog category template changes the desktop vertical spacing to approximately:

60px

Default Maison Blog category template

The current Maison template follows this structure:

Blog category banner
├── Breadcrumb
├── Title
└── Tag filter

Blog category
└── Blog card
    ├── Blog info
    │   ├── Title
    │   ├── Author date — Disabled
    │   ├── Summary
    │   └── View more
    └── Cover image
        ├── Aspect ratio: 16:9
        └── Show date: Enabled

Main Blog category settings:

Setting Maison default
Blogs per page 6
Desktop columns 2
Mobile columns 1
Custom spacing Enabled
Vertical spacing 60px
Section width Page

Blog section vs. Blog category template

These two Maison features serve different purposes:

Feature Blogs section Blog category template
Purpose Showcase blog posts on another template Main page for browsing a Blog category
Source Merchant selects a Blog category Uses the current Blog category automatically
Main content block Blog list Blog card
Desktop layout Grid or Carousel Grid
Maximum displayed posts Maximum articles Blogs per page
Pagination No standard pagination Yes
Tag filtering No Yes, through Blog category banner
Columns Up to 5 Up to 3
Mobile carousel Optional No

How the Blog category template works

Customer opens a Blog category
│
├── Blog category banner
│   ├── Show Breadcrumb
│   ├── Show current Blog title
│   └── Read available post tags
│       └── Generate Tag filter
│
└── Blog category
    ├── Load posts from current category
    ├── Apply active tag filter
    ├── Apply Blogs per page
    ├── Render each post using Blog card
    └── Generate Pagination when required

Recommended setup

For a clean Maison-style Blog category page:

  • Keep the Blog category banner Title enabled.
  • Use Tag filter when your posts have useful content categories.
  • Use 2 desktop Columns for an editorial layout.
  • Use 1 Mobile column for larger and easier-to-read Blog cards.
  • Use consistent Cover image ratios.
  • Use Maximum rows on Title and Summary if card heights vary too much.
  • Enable Author date only when author/date metadata is useful.
  • Keep Blogs per page at a reasonable value to avoid overly long category pages.
  • Test tag filtering and pagination after publishing new posts.

Notes and limitations

Please note the following behavior:

  • Blog category banner and Blog category are separate sections in the default template.
  • The Banner Title automatically displays the current Blog category title.
  • Tag filter options are generated from tags used by posts in the current Blog category.
  • Tag filter is hidden when no tags are available.
  • Desktop Tag filter uses links.
  • Mobile Tag filter uses a dropdown.
  • Blog category posts are loaded automatically from the current category.
  • Blogs per page supports 2–50 posts.
  • Desktop Columns supports 1–3.
  • Mobile columns supports 1–2.
  • Pagination is generated automatically when required.
  • One Blog card structure is reused for all posts.
  • Blog card supports one Cover image and one Blog info block.
  • Blog info supports one Title, Author date, Summary, and View more block each.
  • Cover image and Blog Title link to the post page.
  • Blog card border and shadow settings are controlled globally under Theme settings > Blog cards.

Troubleshooting

If the Blog category template does not display correctly, check the following:

  • Make sure the Blog category contains published posts.
  • If Tag filter is missing, make sure the posts contain tags.
  • If a tag is missing from the filter, check whether at least one post in the current Blog category uses that tag.
  • If the wrong posts appear after selecting a tag, check the tags assigned to those posts.
  • If fewer posts appear than expected, check Blogs per page and Pagination.
  • If Pagination does not appear, make sure the total number of posts exceeds Blogs per page.
  • If the desktop grid has the wrong number of cards per row, check Columns.
  • If mobile cards are too small or too large, check Mobile columns.
  • If Cover images crop incorrectly, adjust the Cover image Aspect ratio or Image fit.
  • If the Cover date is missing, enable Show date.
  • If Author date is missing, make sure the block is enabled and Show author / Show date are turned on.
  • If Summary is empty, check that the blog post has excerpt data.
  • If View more disappears on mobile, check Hide on mobile.
  • If Blog card border or shadow looks unexpected, check Theme settings > Blog cards.
  • Save your changes and test the category page, tag filtering, and Pagination on both desktop and mobile.

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.