# Blog posts

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FwA7kBsskPTWECXTlFTsG%2FFox-BG%20Light%20(19).jpg?alt=media&#x26;token=a9f77f70-30d5-4aec-9360-39a042bf17f1" 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 [#highlight-text](https://docs.foxecom.com/zest-theme/pages-global-sections/general-settings#highlight-text "mention")
{% 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FsDuJzogyCIr0UGlAHcW2%2Fimage.png?alt=media&#x26;token=b05a9722-9bd3-4cc6-a447-bf2ef850c33c" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F2xhWfAZubycvvDlYMXP3%2Fimage.png?alt=media&#x26;token=d190d852-3363-43e4-b10b-594dccd35f79" alt=""><figcaption></figcaption></figure> <figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FwWTrEfDciF6zB09jvZIS%2Fimage.png?alt=media&#x26;token=148193de-c044-4e43-8f25-6be48ce338bf" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FbsXdaKO1oOTSsv9xIGgv%2Fimage.png?alt=media&#x26;token=b7b62587-6272-4739-9822-20f86fd5ed99" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fbbset3geFIDHOO0tCNeY%2Fimage.png?alt=media&#x26;token=49e5473d-a391-4f2f-b644-3a6ebfb4130a" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FMAYqA7oPH8YbG9IZztdf%2Fimage.png?alt=media&#x26;token=9eb6c9c1-cda4-4949-b336-f0e5ae49431e" alt=""></p></td></tr><tr><td><strong>Show excerpts</strong></td><td>Toggle excerpt display on smaller screens.</td></tr></tbody></table>