> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/blog-posts.md).

# Blog posts

<figure><img src="/files/xYERzaS5pDf4WfZc7RyL" alt=""><figcaption></figcaption></figure>

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 style="success" %}
Steps

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

## How to edit Blog posts section

### Section header

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

{% hint style="info" %}
:bulb: Add emphasis to the heading using [General settings](/zest-theme/pages-global-sections/general-settings.md#highlight-text)
{% endhint %}

### Blog

Choose which block to pull posts from.

{% hint style="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).
{% endhint %}

<figure><img src="/files/46g6iSTrWJema19GZHCi" alt=""><figcaption></figcaption></figure>

### Article card

<table><thead><tr><th width="240">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image ratio</strong></td><td>Adjust image crop style: <code>Adapt to image</code>, <code>Square</code>, etc.</td></tr><tr><td><strong>Heading size</strong></td><td>Adjust font size for article titles.</td></tr><tr><td><strong>Show date</strong></td><td>Toggle display of published date.</td></tr><tr><td><strong>Show excerpts</strong></td><td>Show a short summary (from the blog’s excerpt field).</td></tr><tr><td><strong>Show "Read more" button</strong></td><td>Toggle visibility of read more link.</td></tr></tbody></table>

<div><figure><img src="/files/uUUOQ69aOh9th1L2r3CS" alt=""><figcaption></figcaption></figure> <figure><img src="/files/OPTNOr9kczzSeSiOtmyN" alt=""><figcaption></figcaption></figure></div>

### View all button

Use this to link users to your full blog archive.

<table><thead><tr><th width="240">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Button label</strong></td><td>Optional text. Leave blank to hide the button.</td></tr><tr><td><strong>Button style</strong></td><td>Choose from primary/secondary/white/underline button designs.</td></tr></tbody></table>

<figure><img src="/files/lHgO0UFkahd4hooojatX" alt=""><figcaption></figcaption></figure>

### Grid settings

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Post to show</strong></td><td>Set the number of articles to display (up to 12).</td></tr><tr><td><strong>Number of columns on desktop</strong></td><td>Choose how many columns to display (2-6).</td></tr><tr><td><strong>Column gap / Row gap</strong></td><td>Adjust spacing between posts.</td></tr></tbody></table>

### Carousel settings

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable carousel on desktop</strong></td><td>Turn your blog posts into a sliding carousel (The number of posts must larger than the number of columns).</td></tr><tr><td><strong>Show pagination</strong></td><td>Display dots indicating slide progress.</td></tr><tr><td><strong>Show navigation</strong></td><td>Show arrows for manual navigation.</td></tr></tbody></table>

### Mobile layout

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable swipe on mobile</strong></td><td><p>Enable horizontal swipe on phones. </p><p></p><div><figure><img src="/files/Ebn17zRZrBB3jqR2RESU" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Number of columns on mobile</strong></td><td><p>Choose between 1 or 2 columns. </p><p></p><p><img src="/files/gWaWJWyjDyHMR2m95Q6N" alt=""></p></td></tr><tr><td><strong>Show excerpts</strong></td><td>Toggle excerpt display on smaller screens.</td></tr></tbody></table>