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