# 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" %}
Check out Shopify's guide on [How to start a blog and grow your audience](https://www.shopify.com/blog/how-to-start-a-blog).
{% endhint %}

## Add images and excerpts

***

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.

<details>

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

In your **Shopify Admin**:

1. Find your blog posts under **Online Store > Blog posts**.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-19a30b7f95f4cac5f8b07d7e33c276eb6f271eaf%2Fblog-posts-admin.jpeg?alt=media)
2. In the **Featured image** section, click **Add image** to upload an image file.

   > There are no required dimensions. We recommend using the same shape and size for all blog images with a minimum width of **`2500px`** for optimal quality across all devices.
3. (***Optional.)*** In the **Excerpt** section, add a short summary of your post to appear in the blog posts section.

   > For the best results, write excerpts that are approximately the same length for all blog posts.
4. Click **Save**.

</details>

## Set up section

***

{% hint style="info" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Select blog posts source

***

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:

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

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

`Click Blog posts section to find settings`

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

## Customize blog post cards

***

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

### Show blog post details

***

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 %}

`Click Blog posts section to find settings`

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

### Change image shape

***

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 %}

`Click Blog posts section to find settings`

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

## Section header

***

The **Section header** appears above the main content. Click the section to find the header settings

* Add a **heading** and **subheading.**
* Add optional **button link**
* To remove the section header, delete any text in these fields

`Click the section to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr></tbody></table>

***

> **Related links**
>
> [Blog posts template](https://help.fluorescent.co/stiletto/pages/templates/blog-posts-template)\
> [Blog page template](https://help.fluorescent.co/stiletto/pages/templates/blogs-page)


---

# 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://help.fluorescent.co/stiletto/sections/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.