# 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="/files/ulcyMCad5UpZYBpu4a6c" alt=""><figcaption><p>Grid style</p></figcaption></figure> <figure><img src="/files/UCaTq377tyBYeOUEnfxx" 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](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) 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="/pages/3wq6hFMr3k1BDOHIgjqZ#section-header">/pages/3wq6hFMr3k1BDOHIgjqZ#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#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="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#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="/pages/3wq6hFMr3k1BDOHIgjqZ#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="/files/FxH1dV8pbGGehtVfSYBD" 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>


---

# 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/eclipse/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.