# Blogs page

![](https://docs-assets.foxecom.app/motrix-theme/64f2a3ac-fb82-468e-99da-4e962ed058f0.jpg)

Display **blog posts as a card grid** with the blog title and tag links above the list. Customers can browse posts by tag and use pagination to move between pages when the blog contains more posts than the **Post limit**.

## How to customize Blogs listing page

1. Go to **Online Store > Themes** in Shopify Admin.
2. Find your theme and click **Edit theme**.
3. Open the page selector and select the **Blogs** page > **Select a template**
4. Select the **Blog posts** section from the section list
5. Adjust the section settings and customize its blocks.
6. **Save** your changes.

<img width="480" src="https://docs-assets.foxecom.app/motrix-theme/c42896ef-d3bb-4119-bc29-ee8b7664406b.png" />

## Section settings

### Layout

Control the width, number of posts, and spacing of the blog post grid.

<Table widths="30%">
  | Setting                          | Description                                                                                   | Options       |
  | -------------------------------- | --------------------------------------------------------------------------------------------- | ------------- |
  | **Container**                    | Set whether the blog content stays within the page width or spans the available screen width. | Fixed / Full  |
  | **Post limit**                   | Set how many posts appear on each page. Additional posts appear on subsequent pages.          | 2 - 12        |
  | **Number of columns on desktop** | Set how many article cards appear in each row on desktop.                                     | 1 - 4 columns |
  | **Column gap**                   | Set the horizontal space between article cards.                                               | 0px - 100px   |
  | **Row gap**                      | Set the vertical space between rows of article cards.                                         | 0px - 100px   |
</Table>

<Hint type="success" title="Tip">
  Use fewer columns when your article cards contain longer titles or excerpts. This gives each card more space and makes the content easier to scan.
</Hint>

### Mobile layout

Control the blog post grid on mobile devices.

<Table widths="30%">
  | Setting               | Description                                                     | Options              |
  | --------------------- | --------------------------------------------------------------- | -------------------- |
  | **Mobile columns**    | Set how many article cards appear in each row on mobile.        | 1 column / 2 columns |
  | **Column gap mobile** | Set the horizontal space between article cards on mobile.       | 0px - 100px          |
  | **Row gap mobile**    | Set the vertical space between rows of article cards on mobile. | 0px - 100px          |
</Table>

<Hint type="success" title="Tip">
  Use one column when your article cards include longer titles, excerpts, or metadata. Use two columns when you want customers to browse more posts at once.
</Hint>

### Appearance

Customize the overall appearance of the Blog posts section.

<Table widths="30%">
  | Setting          | Description                                 | Options               |
  | ---------------- | ------------------------------------------- | --------------------- |
  | **Color scheme** | Apply a color scheme to the entire section. | Select a color scheme |
</Table>

### Padding

Choose **Desktop** or **Mobile**, then control the top and bottom spacing around the section. Left and right padding controls are available when **Container** is set to **Full**.

<Table widths="30%">
  | Setting | Description                                                                  | Options          |
  | ------- | ---------------------------------------------------------------------------- | ---------------- |
  | Devices | Choose the device type for the padding settings.                             | Desktop / Mobile |
  | Top     | Set the space above the blog content.                                        | 0px - 100px      |
  | Bottom  | Set the space below the blog content.                                        | 0px - 100px      |
  | Left    | Set the space to the left of the content when **Container is set to Full.**  | 0px - 100px      |
  | Right   | Set the space to the right of the content when **Container is set to Full.** | 0px - 100px      |
</Table>

## Blocks

The **Blog posts** section includes **Heading**, **Tags**, and **Article card** blocks. Use these blocks to control the blog title, tag navigation, and individual post cards.

### Heading

Displays the blog title above the article list.

![](https://docs-assets.foxecom.app/motrix-theme/e704b951-0cd6-4fba-b015-ece698cd0bce.png)

### Tags

Displays links to the blog's tags above the article list. **All posts** shows all posts, while selecting a tag reloads the page to show only posts with that tag.

Use the block settings to control how many tags appear in the list.

![](https://docs-assets.foxecom.app/motrix-theme/0ff7d3e3-b799-47a0-ab8f-ffed81ef1975.png)

<Hint type="success" title="Tip">
  Keep tag names short so customers can scan and browse the tag list easily, especially on mobile where the tags scroll horizontally.
</Hint>

### Article card

Displays each blog post as an individual card in the grid.

The Article card includes **child blocks** that control the content shown on each post card, such as the tag label, title, metadata, excerpt, and button.

See the [**Article card** documentation for details on configuring **child block settings**](https://docs.foxecom.com/motrix-theme/theme-blocks/article-card#article-card-items)**.**

<img height="294" width="537" src="https://docs-assets.foxecom.app/motrix-theme/639cb13a-b995-4454-b899-44180cd1c5f1.png" />

<Table widths="30%">
  | Setting                   | Description                                                             | Options       |
  | ------------------------- | ----------------------------------------------------------------------- | ------------- |
  | **Alignment**             | Set the alignment of the content inside the article card.               | Left / Center |
  | **Enable video lightbox** | Open the article's video in a larger lightbox when customers select it. | On / Off      |
</Table>

<Tabs>
  <Tab title="Alighment - Left">
    ![](https://docs-assets.foxecom.app/motrix-theme/ab85ce7f-f13f-4a46-ae11-3ec146d0d74f.png)
  </Tab>

  <Tab title="Alighment - Center">
    ![](https://docs-assets.foxecom.app/motrix-theme/96eeffd9-ba6c-47cf-bc7b-f53120ef62ac.png)
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Enable video lightbox - On">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/a7157d61-775d-4fab-846e-b976b0963e21.mp4" autoPlay="true" loop="true" muted="true" controls="true" />
  </Tab>

  <Tab title="Enable video lightbox - Off">
    ![](https://docs-assets.foxecom.app/motrix-theme/509d2f70-d4b7-4412-b7a6-dd8bc9f148f8.png)
  </Tab>
</Tabs>

## Additional sections and blocks

Add other available theme sections or blocks to customize the Blogs page.

Use these additional sections to add content such as product recommendations, promotional content, images, or other supporting information below the search area.

The available sections and blocks depend on the theme and its version.

Learn more:

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-sections/overview">
  Theme sections
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-blocks/overview">
  Theme blocks
</PageLink>

## Tips

* Use consistent image crops across your articles so the card grid stays visually aligned.
* Keep article titles concise when using multiple columns.
* Use the tag filter to help customers browse posts by topic.
* On mobile, the tag list scrolls horizontally, so shorter tag names are easier to browse.