# Blog posts

Add the **Blogs posts** section to display your latest posts.

* Use the **Grid** or **Featured post** style to showcase the most recent posts.
* Display **Category text** that shows scrolling post tags on featured posts.
* Customize the appearance and details of **blog post cards**.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F5oBOcOTnjqB0QC30rSOX%2Fblog-posts-grid.jpg?alt=media&#x26;token=d15c2bdf-f27b-4f9e-a6c0-38cd84993fb2" alt=""><figcaption><p>Grid style</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FS4jiqqvnaZkUj3uwNfSn%2Fblog-posts-featured.jpg?alt=media&#x26;token=c7192e6f-053f-471f-a90e-f2d5efc81b68" alt=""><figcaption><p>Featured article style</p></figcaption></figure></div>

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/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.

Click the section to add a **section header** and change **section styles** for colors and spacing.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section header</strong></mark></td><td><a href="../overview/section-styles#section-header">#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Width and Padding</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr></tbody></table>

### Select blog posts to show

***

{% hint style="success" %}
The section uses your blog post's **Featured image**, **Title**, **Content**, **Tags**, **Published date** and **Author**. See Shopify's guides to [create a blog](https://help.shopify.com/en/manual/online-store/blogs/adding-a-blog) and add [blog posts](https://help.shopify.com/en/manual/online-store/blogs/writing-blogs).
{% endhint %}

Select which posts to display, and choose how many you want to show.

`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;">Blog</mark></td><td>Select a blog to display its latest posts, from newest to oldest. Click Change to select a different blog.</td><td></td></tr><tr><td><mark style="color:blue;">Number of articles</mark></td><td>Choose how many posts to display in the section.</td><td><p><strong>1 - 8</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 6</mark></p></td></tr></tbody></table>

## Use grid or featured article style

***

Choose a section layout. Display all posts as a **Grid** or use the **Featured article** style to showcase your most recent post.

`Click Blog posts section to find settings`

<table><thead><tr><th width="172">Setting</th><th width="365">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Style</mark></td><td>Change the layout of the blog posts.<br><br><strong>Featured article</strong>: Displays the most recent article as the largest post and the rest in the sidebar.<br><br><strong>Grid</strong>: Displays the 2 most recent articles as cards and the rest in the sidebar.</td><td><strong>Featured article</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Grid</strong></td></tr><tr><td><mark style="color:blue;">Featured article color scheme</mark></td><td>Select a set of colors to apply to the featured article. You can add and define different color schemes in Theme settings > Colors. <a href="../overview/section-styles#section-colors">Learn more</a></td><td></td></tr></tbody></table>

## Enable scrolling category text

***

Show a scrolling text bar with the featured post's tags when hovered over. You can also change the **Scroll direction and speed**.

{% hint style="success" %}
From your Shopify Admin, go to **Blogs** and click to open your blog post. Enter tags in the **Tags** section that you want to appear in the scrolling category text.
{% endhint %}

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FzfGOseMjgxTJz8SgRfVG%2Fblog-posts-scrolling-text.jpg?alt=media&#x26;token=af90c077-8baa-4d96-82e9-431ca05c8a6c" alt="" width="563"><figcaption></figcaption></figure>

`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;">Enable scrolling category text on hover</mark></td><td>Show an auto-scrolling bar with the featured post's tag.</td><td></td></tr><tr><td><mark style="color:blue;">Scroll duration</mark></td><td>Set the number of seconds it takes for the category text to fully rotate.</td><td><strong>5 - 45 seconds</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 10</mark></td></tr><tr><td><mark style="color:blue;">Scroll direction</mark></td><td>Choose which way the category text moves.</td><td><strong>Left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right</strong></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.**

### Change image aspect ratio

***

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> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>

### 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 tags</mark></td><td>Shows 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></tbody></table>

### Show read more button

***

`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;">Show "Read more" button</mark></td><td>Display a button that links to the blog post.</td><td></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the "Read more" button.</td><td><strong>Solid</strong><br><strong>Outline</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Text</strong></td></tr></tbody></table>

## Customize latest posts sidebar

***

The **Latest posts sidebar** display the remaining posts from your blog, next to the featured posts.

`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;">Enable thumbnail hover effect</mark></td><td>Display the blog post image when hovering over an article in the sidebar.</td><td></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of latest posts sidebar.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Latest post"</mark></td></tr></tbody></table>