# Blog posts

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/ira/readme/theme-retirement).
{% endhint %}

Add a **Blog posts** section to display a grid of your recent blog posts. Select which blog to feature and customize the layout.

{% hint style="info" %}
**Tip |** 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.

<details>

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

In your **Shopify Admin**:

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

   ![](https://github.com/fluorescent/kb-ira/blob/main/.gitbook/assets/blog-posts-admin.jpeg)
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. In the **Excerpt** section, add a summary of your post.

   > If left blank, Ira will automatically display the first few sentences of the post. For the best results, add excerpts that are around the same length for all blog posts.
4. Click **Save**.

</details>

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

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

<details>

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

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

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/ira/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Blog posts**.
3. Change the order of your sections by using the drag and drop handles **`⋮⋮`**

</details>

## Select blog posts to show

The **Blog posts** section displays the most recent posts from one of your blogs. Select a blog, then customize the layout and style.

<details>

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

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

1. Click on the **Blog posts** section to open the section settings.
2. Click **Select blog** to find and choose the blog you want to feature in this section.

   > If some posts are missing feature images, go to **Online Store > Blog posts** to add a featured image in you Shopify admin.
3. (*Optional*) Change the **Heading** text that displays in the top-left of the section.

   > We recommend a short title of 2 to 3 words.
4. Use the sliders to set the number of **Posts per row** and number of **rows** to change the layout of the featured posts.
5. To make your images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of each image.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
6. Click **Save**.

</details>

## Settings reference

Click the **Blog post** section to find the following settings:

| Setting            | Description                                                                                                                                                                                   |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Heading            | Enter heading text to display as a section title.                                                                                                                                             |
| Blog               | Select one of your blogs to display the most recent posts.                                                                                                                                    |
| Posts per row      | Choose how many articles to display in each row: either 2, 3, or 4 columns.                                                                                                                   |
| Rows               | Choose to display 1, 2, or 3 rows of posts.                                                                                                                                                   |
| Image aspect ratio | Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). |
| <p><br></p>        |                                                                                                                                                                                               |

***

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