> For the complete documentation index, see [llms.txt](https://docs.foxecom.com/foxify-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/blog-posts.md).

# Blog posts

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

Display a grid or carousel of blog articles on any Foxify page — keeping customers engaged with your content without navigating away.

## When to use this element

Use Blog posts when you want to surface blog content directly on a page — so customers can discover articles without going to a separate blog page.

Best fits for:

* A homepage section showing latest news, tips, or brand stories
* A landing page combining product content with editorial articles
* A "You might also like" section at the bottom of a product or collection page
* Any page where building trust through content supports conversion

### &#x20;How is this different from Blog post elements

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Use this</td><td><strong>Blog posts element</strong></td><td>Shows a configurable grid or carousel of article cards pulled from a blog. Works on any page type. Use when you want to list multiple posts.</td><td></td></tr><tr><td>Use instead if...</td><td><strong>Blog post elements</strong></td><td>You're building a blog post template and want to display the full content of a single post — title, content, image, comments, and sharing.</td><td><a href="/pages/rsV7GXru96qGiiJ7bFGW">/pages/rsV7GXru96qGiiJ7bFGW</a></td></tr></tbody></table>

## Quick setup

{% hint style="info" %}
**Before you start:** Make sure you have at least one published blog with posts in Shopify Admin → Content → Blog posts.&#x20;

See [Add and managing blog posts](https://help.shopify.com/manual/online-store/blogs/writing-blogs/working-with-blog-posts)
{% endhint %}

{% stepper %}
{% step %}
**Add the element**

Click **Add elements** (or press **E**) → find **Blog posts** in Quick add → drag it onto your canvas.

<div align="left" data-with-frame="true"><figure><img src="/files/260a6ONF6oP97KmCs6vY" alt="" width="290"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
**Select your blog**

In Inspector → **General** → **Select blog**, choose the blog you want to pull posts from.
{% endstep %}

{% step %}
**Set posts and columns**

Set how many posts to show (up to 24) and how many columns to display them in.
{% endstep %}

{% step %}
**Choose a card style**

Select the article card on the canvas. In the Inspector panel, choose a **Card style** preset or use Custom to control each card element individually.
{% endstep %}

{% step %}
**Preview and publish**

Check mobile preview, then click **Save & Publish**.
{% endstep %}
{% endstepper %}

**Expected result:** A grid of article cards appears on your page, each showing the post image, title, excerpt, and meta. Clicking a card takes the customer to the full blog post.<br>

### Settings — General

<table><thead><tr><th width="190">Setting</th><th>What it does</th><th>When to use</th></tr></thead><tbody><tr><td>Select blog</td><td>Chooses which Shopify blog to pull posts from</td><td>If you have multiple blogs, pick the one most relevant to this page's context.</td></tr><tr><td>Number of posts</td><td>How many posts are displayed (max 24)</td><td>3–6 for a homepage section. Use more for a dedicated blog listing page.</td></tr><tr><td>Columns</td><td>How many columns the post grid uses</td><td>3-4 for a compact grid. Avoid more than 4 on pages with a narrow content area.</td></tr><tr><td>Gap</td><td>Spacing between cards horizontally and vertically</td><td>Increase for an editorial, airy feel. Decrease for a dense content grid.</td></tr><tr><td>Enable carousel on desktop</td><td>Turns the grid into a scrollable carousel on desktop</td><td>Use when you have many posts but limited vertical space — lets customers browse without the section growing too tall.</td></tr><tr><td>Enable swipe on mobile</td><td>Allows swipe navigation on mobile</td><td>Recommended on — makes the element much easier to browse on small screens.</td></tr></tbody></table>

## Article card settings

Click any individual post card on the canvas to edit its settings. Changes apply to all cards in the element.

#### Card style

<table><thead><tr><th width="200">Option</th><th>When to use</th></tr></thead><tbody><tr><td>Use global</td><td>Inherits card style from Theme settings → Product cards. Best for consistency — change once, update everywhere.</td></tr><tr><td>Style 1 / Style 2</td><td><p>Quick presets if you want this section to look different from the rest of the store without custom styling.</p><p></p><ul><li>Style 1:</li></ul><p><br><img src="/files/u5r5xJkZFE7muCOgrn4s" alt=""></p><p></p><ul><li>Style 2:</li></ul><p><img src="/files/Xp7Pra7AoyP3A4mRE89l" alt=""></p></td></tr><tr><td>Custom</td><td>Full control — add, remove, and reorder card elements (image, title, meta, excerpt, read more). Use when presets don't fit your layout needs.</td></tr></tbody></table>

#### Image ratio

<table><thead><tr><th width="200">Option</th><th>When to use</th></tr></thead><tbody><tr><td>Use global</td><td>Matches image ratio from Theme settings. Recommended for consistency.</td></tr><tr><td>Adapt to image</td><td>Each card takes the natural dimensions of its image. Use when blog images have varied sizes and you don't want cropping.</td></tr><tr><td>Square (1:1)</td><td>Consistent, modern look. Works well on any grid width.</td></tr><tr><td>Portrait (3:4)</td><td>Good for editorial or fashion blogs where tall imagery is common.</td></tr><tr><td>Landscape (4:3)</td><td>Good for lifestyle, food, or travel content with wide hero images.</td></tr></tbody></table>

#### Text align

<table><thead><tr><th width="200">Option</th><th>When to use</th></tr></thead><tbody><tr><td>Left</td><td>Default — works well for most layouts, especially multi-column grids.</td></tr><tr><td>Center</td><td>Good for editorial or minimal designs where centered text feels intentional.</td></tr><tr><td>Right</td><td>Rarely used — only when the overall page layout calls for right-aligned text.</td></tr></tbody></table>

#### Custom card elements

When using Custom card style, you can manage what appears on each article card. By default, cards include blog-specific elements — but you can also add any standard Foxify element (text, buttons, images, icons, etc.) directly onto the card.

Drag elements up or down within the card to change the order they appear.

*Learn more:*

* Blog post elements: [Blog post's elements](/foxify-app/foxstudio/add-and-edit-elements/blog-posts-elements.md)
* Other elements: [Add and edit elements](/foxify-app/foxstudio/add-and-edit-elements.md)

## FAQs

#### My posts aren't showing up. What should I check?

Make sure the blog you selected has published posts in Shopify Admin → Content → Blog posts. Draft or hidden posts won't appear.

#### Can I show posts from multiple blogs in one element?

No — each Blog posts element pulls from one blog at a time. To show posts from different blogs, add multiple Blog posts elements and select a different blog for each.

#### How do I control which posts appear first?

Posts appear in the order they were published — most recent first. To change the order, adjust publish dates in Shopify Admin → Content → Blog posts.

## Related articles

{% content-ref url="/pages/rsV7GXru96qGiiJ7bFGW" %}
[Blog post's elements](/foxify-app/foxstudio/add-and-edit-elements/blog-posts-elements.md)
{% endcontent-ref %}

{% content-ref url="/pages/oUnDtiN9zv426y8tZAQs" %}
[Create a Blog post](/foxify-app/page-management/page-creation/create-a-blog-post.md)
{% endcontent-ref %}

{% content-ref url="/pages/oyzeEMF9W6DvVdUxbByd" %}
[Theme settings](/foxify-app/page-management/theme-settings.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/foxify-app/foxstudio/add-and-edit-elements/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.