# Blog page

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

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FpOSYr5sd98h7dOkbCM1j%2Fblog-page.jpg?alt=media&#x26;token=87d806c4-2e9d-46b5-a235-abba74f72424" 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](https://help.fluorescent.co/eclipse/pages/templates/using-templates) to design different page layouts.

[Add dynamic content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) 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="../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</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="../../sections/overview/section-styles#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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FI416bPTPseDvwlAGbnR2%2Fblog-categories.png?alt=media&#x26;token=5caccfa9-389e-4699-b37d-28fac26b1309" alt="" width="375"><figcaption><p>Categories filters on blog page</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FMMwVIAPfKbhJ5SMfV7xI%2Fadmin-blog-tags.png?alt=media&#x26;token=ee22e392-0ebd-45b7-aec2-a228b6b2a61a" 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FWTtlhnZIxGXTHLmSEEMM%2Fpw%20697.png?alt=media&#x26;token=d999bf54-3b2f-4b7c-9234-225375fa4edc" 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="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 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FBrxvCAwf8YurHuR041L1%2Fblog-settings-categories.png?alt=media&#x26;token=314fd3ea-463a-49bb-b077-d756183cd301" alt="" width="320"><figcaption><p>Article categories option in theme settings > blog</p></figcaption></figure>