# Blog posts

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(19)_xYERzaS5.jpg)

Display a grid of recent articles from your Shopify blog to keep customers engaged, boost SEO, and drive traffic to product or collection pages.

## How to add Blog posts section to your Shopify store

<Hint type="success">

Steps

1. In the theme editor **(Customize)**, click **Add section**
2. Select **Blog posts**
3. Make necessary changes
4. **Save.**

</Hint>

## How to edit Blog posts section

### Section header

Add a heading, subheading and description that appears on top of the blog posts.

<Hint type="info">

💡 Add emphasis to the heading using [Highlight text](https://docs.foxecom.com/zest-theme/pages-global-sections/general-settings#highlight-text)

</Hint>

### Blog

Choose which block to pull posts from.

<Hint type="info">

To know more about how to add a blog to your online store, see [Blogs](https://help.shopify.com/en/manual/online-store/blogs).

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_46g6iSTr.png)

### Article card

<Table widths="240,auto">

| Setting | Description |
| --- | --- |
| **Image ratio** | Adjust image crop style: `Adapt to image`, `Square`, etc. |
| **Heading size** | Adjust font size for article titles. |
| **Show date** | Toggle display of published date. |
| **Show excerpts** | Show a short summary (from the blog’s excerpt field). |
| **Show "Read more" button** | Toggle visibility of read more link. |

</Table>

<div>![image](https://docs-assets.foxecom.app/zest-theme/image_uUUOQ69a.png) ![image](https://docs-assets.foxecom.app/zest-theme/image_OPTNOr9k.png)</div>

### View all button

Use this to link users to your full blog archive.

<Table widths="240,auto">

| Setting | Description |
| --- | --- |
| **Button label** | Optional text. Leave blank to hide the button. |
| **Button style** | Choose from primary/secondary/white/underline button designs. |

</Table>

![image](https://docs-assets.foxecom.app/zest-theme/image_lHgO0UFk.png)

### Grid settings

<Table widths="275,auto">

| Setting | Description |
| --- | --- |
| **Post to show** | Set the number of articles to display (up to 12). |
| **Number of columns on desktop** | Choose how many columns to display (2-6). |
| **Column gap / Row gap** | Adjust spacing between posts. |

</Table>

### Carousel settings

<Table widths="275,auto">

| Setting | Description |
| --- | --- |
| **Enable carousel on desktop** | Turn your blog posts into a sliding carousel (The number of posts must larger than the number of columns). |
| **Show pagination** | Display dots indicating slide progress. |
| **Show navigation** | Show arrows for manual navigation. |

</Table>

### Mobile layout

<Table widths="275,auto">

| Setting | Description |
| --- | --- |
| **Enable swipe on mobile** | Enable horizontal swipe on phones. <br/>![image](https://docs-assets.foxecom.app/zest-theme/image_Ebn17zRZ.png) |
| **Number of columns on mobile** | Choose between 1 or 2 columns. <br/><br/>![image](https://docs-assets.foxecom.app/zest-theme/image_gWaWJWyj.png) |
| **Show excerpts** | Toggle excerpt display on smaller screens. |

</Table>