# Blog page

The **Blogs page** lists your latest blog posts.

<figure><img src="/files/SLixEvzBE81kHiuOH1wQ" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing a template will change all pages that use that template**.

[Create and assign new templates](/eclipse/pages/templates/using-templates.md) to design different page layouts.

[Add dynamic content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% endhint %}

## Customize page styles

***

Change the page **color scheme** and adjust the **page width and padding**.

<table data-view="cards"><thead><tr><th></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><strong>Color scheme</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td><a href="/files/OZ4h4v0qfTnncw43MKk6">/files/OZ4h4v0qfTnncw43MKk6</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td><a href="/files/lMLsRWOpgxDLC0CvtnAt">/files/lMLsRWOpgxDLC0CvtnAt</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td><a href="/files/3ddmAtuVNo9MtYTf38ov">/files/3ddmAtuVNo9MtYTf38ov</a></td></tr></tbody></table>

## Customize layout

***

* Choose to show the **blog title**.
* Change the **number of columns** and **articles per page**.
* Change the **featured article color scheme**

&#x20;

`Click Blog page 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 blog title</mark></td><td>Display the title of the blog.</td><td></td></tr><tr><td><mark style="color:blue;">Articles per page</mark></td><td>Set the number of articles to display per page.</td><td><strong>1-12</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 8</mark></td></tr><tr><td><mark style="color:blue;">Number of columns</mark></td><td>Choose the number of columns for displaying articles.</td><td><strong>2</strong><br><strong>3</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr></tbody></table>

## Customize featured article

***

The blog displays the **Featured article** by default. You can disable the **feature the first article** option to display all posts as a **Grid**.

When enabled, you can customize the appearance of the featured articled:

* Choose the **color scheme**
* Change or remove **image overlay**
* Adjust **heading size** of article title.

`Click Blog page 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;">Feature the first article</mark></td><td>Display the first article in a featured format.</td><td></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select a set of colors to apply to the featured article section. 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><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.</td><td><strong>0 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 20%</mark></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1 - 8</strong></td></tr><tr><td><mark style="color:blue;">Mobile heading size</mark></td><td>For mobile screens, change the size of the heading text from small to large.</td><td><strong>1 - 8</strong></td></tr></tbody></table>

## Show category filters

***

Choose to show **category filters** to allow visitors to filter blog posts by article categories.

{% hint style="success" %}
By default, all **blog post tags** are used as article categories.

* Go to **Online Store > Blog posts** to edit **Tags** for each post.
* Go to **Theme settings > Blog** to [limit which tags are shown as article categories](#choose-which-tags-to-show-as-categories).
  {% endhint %}

<div><figure><img src="/files/WOGoAr00P8Kfh2O5z9gp" alt="" width="375"><figcaption><p>Categories filters on blog page</p></figcaption></figure> <figure><img src="/files/46tKmsJ07eSU0ijUNfWB" alt=""><figcaption><p>Blog post tags setting in admin</p></figcaption></figure></div>

`Click Blog page section to find settings`

<table><thead><tr><th width="214">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show category filters</mark></td><td>Display article categories to allow visitors to filter blog posts.</td></tr><tr><td><mark style="color:blue;">Show category filter counts</mark></td><td>Display the number of posts for each category. Important: If you have more than one blog, the count will include tagged posts for all blogs.</td></tr></tbody></table>

## Customize posts style

***

By default, posts show a featured image, post details, and an optional 'read more' button.

Click the **Blog posts** section to customize the appearance of posts:

* Change the **image aspect ratio** of post images
* Choose which **post details** to show
* Choose to show optional **read more 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

***

By default, posts display the title, date, author, and tags. Click **Blog posts** to 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 %}

<figure><img src="/files/N2452wPXUMV7EFYC15sh" alt="" width="224"><figcaption></figcaption></figure>

`Click Blog posts section to find settings`

<table><thead><tr><th width="212">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show article tags</mark></td><td><p>Shows tags that you've added to posts in the Shopify admin.<br><br></p><p>Go to <strong>Online Store > Blog posts</strong> to edit <strong>Tags</strong> for each post. Go to <strong>Theme settings > Blog</strong> to <a href="#choose-which-tags-to-show-as-categories">limit which tags are shown</a>.</p></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

***

Chose to show a "Read more" button for each post. Clicking the post image or title will also redirect to the blog post page.

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

## Enable scrolling category text

***

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

{% hint style="success" %}
By default, all **blog post tags** are displayed.

* Go to **Online Store > Blog posts** to edit **Tags** for each post.
* Go to **Theme settings > Blog** to [limit which tags are displayed](#choose-which-tags-to-show-as-categories).
  {% endhint %}

<figure><img src="/files/FxH1dV8pbGGehtVfSYBD" alt="" width="563"><figcaption></figcaption></figure>

`Click Blog page 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 scrolling category text when hovering over articles.</td><td></td></tr><tr><td><mark style="color:blue;">Scroll duration</mark></td><td>Set the duration for the scrolling category text.</td><td><strong>5-45</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 the direction for the scrolling category text.</td><td><strong>Left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right</strong></td></tr></tbody></table>

## Choose which tags to show as categories

***

By default, all **blog post tags** are used as article categories. Article categories appear in [category filters](#show-category-filters), [scrolling category text](#enable-scrolling-category-text), and [article tags](#show-blog-post-details).

You may not want to show all tags that you've added in your Shopify admin. To limit which tags are shown as article categories, go to **Theme settings > Blog.**

In the **Article categories** field, enter the tags you want to use in a comma-separated list. For example: `Guides, News, Interviews`.

<figure><img src="/files/KkVLUaBifktSCCp9guES" alt="" width="320"><figcaption><p>Article categories option in theme settings > blog</p></figcaption></figure>


---

# 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/pages/blog-page.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.