# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/blog-posts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.