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

# Blog posts

The **Blog posts** section displays a carousel of featured blog posts. Select which articles to feature and customize the content and style of the section.

{% hint style="info" %}
For the **Blog posts** section to display properly, you will need to add **Featured images** to posts in your Shopify admin. You can also add **Excerpts** to your blog posts to customize the text that appears in the blog posts section. Otherwise, Stiletto will display the first few lines of your post.
{% endhint %}

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Blog posts**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Select blog posts source</h2>

***

Display the latest posts from a **Selected blog** or create a **Custom list** of blog posts.

<details>

<summary><mark style="color:blue;"><strong>STEPS: Show latest posts</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Blog posts** section to open the section settings.
2. Under **Blog post source**, make sure the **Selected blog** option is enabled.
3. Click **Select blog** to find the blog you want to feature.

   > Blogs are a Shopify feature. See their [Blogs help guide](https://help.shopify.com/en/manual/online-store/blogs/adding-a-blog) to learn more.
4. Use the **Number of articles** slider to set the maximum number of recent blog posts (between **`2`** and **`12`**).
5. Click **Save**.

</details>

<details>

<summary><mark style="color:blue;"><strong>STEPS: Show selected posts</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Blog posts** section to open the section settings.
2. Under **Blog post source**, select **Custom list**.
3. In the section list panel, click **(+) Add Article** to add an article block.

   > Click **Remove block** or the eye icon to delete or hide a block.
4. Click **Select Article** to choose an article from the list.

   > After you have selected a blog post, you can follow the **Edit article** link if you need to add a blog image and excerpt.
5. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the posts:

   ![](/files/tOHF9cG7TWZSPV5YgAH3)

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block.
6. Click **Save**.

</details>

<sub><mark style="color:$info;">Click Blog posts section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="186">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Blog posts source</mark></td><td>Choose to display latest posts from a <strong>Selected blog</strong> or a <strong>Custom list</strong> of blog posts that you can add and re-order as blocks.</td></tr><tr><td><mark style="color:blue;">Select blog</mark></td><td>For <strong>Selected block</strong> source, click <strong>Change</strong> to select a blog to display its latest posts.</td></tr><tr><td><mark style="color:blue;">Number of articles</mark></td><td>Choose how many posts to display from your <strong>Selected blog</strong> source: between <strong>2</strong> and <strong>12</strong>.</td></tr><tr><td><mark style="color:blue;">Add article</mark></td><td>For <strong>Custom list</strong>, click <strong>(+) Article</strong> beneath the Blog posts section.</td></tr></tbody></table>

<h2 align="center">Customize blog post cards</h2>

***

Change the visual style of the featured posts, including the **image aspect ratio, blog post details,** and **button.**

### <mark style="color:$primary;">Show blog post details</mark>

Choose which **blog post details to show**.

{% hint style="success" %}
To edit the post details, go to **Online Store > Blog posts** from the Shopify admin.
{% endhint %}

<sub><mark style="color:$info;">Click Blog posts section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="221">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show article categories</mark></td><td>Display tags that you've added to posts in the Shopify admin.</td></tr><tr><td><mark style="color:blue;">Show author</mark></td><td>Display the name of who created the blog post.</td></tr><tr><td><mark style="color:blue;">Show published date</mark></td><td>Display the date when the post was published.</td></tr><tr><td><mark style="color:blue;">Show excerpt</mark></td><td>When checked, the first few lines of the post will appear below.<br><br>You can add a custom excerpt to blog posts in your Shopify admin.</td></tr><tr><td><mark style="color:blue;">Show featured image</mark></td><td>Show the blog post image added in your Shopify admin.</td></tr></tbody></table>

### <mark style="color:$primary;">Select image shape</mark>

Change the **aspect ratio** to crop post images to be a uniform shape.

{% hint style="info" %}
The **aspect ratio** of an image is the proportion between its **w**idth and **h**eight (w:h). A square image has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2).
{% endhint %}

<sub><mark style="color:$info;">Click Blog posts section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Select an <strong>aspect ratio</strong> to crop images to be a uniform shape, or select <strong>Natural</strong> to display images in their original shape.</td><td><strong>Natural</strong><br><strong>Portrait (2:3)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>

***

> **Related links**
>
> [Blog posts template](/stiletto/pages/templates/blog-posts-template.md)\
> [Blog page template](/stiletto/pages/templates/blogs-page.md)


---

# 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, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/blog-posts.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.