# Blog posts

Use the **Blog posts** section to display your latest posts or selected posts from your blog. Blog posts appear as single-row slider that visitors can move through and click to read more.

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

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FxhqOKUoAhBAWsls7OWyY%2Fblog-posts-barista.jpg?alt=media&#x26;token=1a4663d3-75d7-48c4-89e6-172182aae782" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

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

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Select blog posts to show

***

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://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FOcIEQOBbGwGiPeSEuTGv%2Fshopify-content-drag-handles.jpeg?alt=media\&token=80f5a54b-7347-4c2a-b126-eb69640ab472)

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

{% hint style="info" %}
**Add post images and excerpts**

Make sure you've added blog posts with **featured images** in [**Online Store** > **Blog posts**](https://admin.shopify.com/articles)

You can also add **Excerpts** to change the text that appears under posts. By default, the first few lines will be used.
{% endhint %}

`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;">Add article</mark></td><td>For <strong>Custom list</strong>, click <strong>(+) Article</strong> beneath the Blog posts section.</td></tr><tr><td><mark style="color:blue;">Select blog</mark></td><td>For <strong>Selected blog</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>For <strong>Selected blog</strong>, choose how many posts to display: between <strong>2</strong> and <strong>12</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select how many posts to show per row on desktop screens: either <strong>2</strong>, <strong>3</strong>, or <strong>4</strong> columns.<br><br><em>On mobile, the section displays one column</em>.</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,** as set up in your Shopify admin.

{% hint style="success" %}
To edit the post details, go to [**Online Store** > **Blog posts**](https://admin.shopify.com/articles)
{% 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); Portrait (2:1) is taller than it is wide.
{% endhint %}

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-a1c288a8c20161326a93dce363d3dfe30bf321af%2Faspect-ratio.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

`Click Blog posts section to find settings`

<table><thead><tr><th width="140">Setting</th><th width="439">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 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>

## Show text box

***

Choose to display the posts in container boxes with background colors. You can show tiles with **shadows** or **borders**.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FPOafsUKQQaLxKqutPvDA%2Fblog-posts-flair.jpg?alt=media&#x26;token=29a55f55-d1b7-4c46-a8e1-2bcd777f08d5" alt="" width="563"><figcaption></figcaption></figure>

`Click Blog posts section to find settings`

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show text box</mark></td><td>Display all posts within a container.</td></tr><tr><td><mark style="color:blue;">Text box style</mark></td><td>Display boxes with a <strong>Soft drop shadow</strong>, <strong>Solid drop shadow</strong>, or <strong>Borders</strong> with different thicknesses.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Change the color scheme applied to the text box.<br><br>Use the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You can also select a <strong>custom color scheme.</strong> <a href="../../../theme-styles/colors#color-schemes">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Use custom colors for this section to override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for text within the text box.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for the background of text box.</td></tr></tbody></table>

## Section header

***

The **Section header** appears above the section. Add a **heading**, **subheading**, and optional **button**.

<details>

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

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

1. Click the **Blog posts** section to open the section settings.
2. Enter **Accent** text to display a small label above the heading.
3. Enter **Heading** text to display a section title.
4. Enter **Subheading** text to display below the heading.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
5. Select or paste a URL for the **Button Link**.
6. Change the **Button label** (e.g. "View all posts").

   > Leave this field blank to remove the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
7. Click **Save**.

</details>

`Click Blog posts section to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the section.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between <strong>400</strong> and <strong>1000</strong> px.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button. Select Primary button (<strong>Solid</strong>), Secondary button (<strong>Solid</strong>), Tertiary button (<strong>Outline</strong>), or <strong>Text</strong>.</td></tr><tr><td><mark style="color:blue;">Buttons position</mark></td><td>Choose to show the buttons either in the <strong>Header</strong> (below the headings) or in the <strong>Footer</strong> (below the posts).<br><br><em>In the footer position, the button is always centered.</em></td></tr></tbody></table>

\\

***

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