> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/pages/templates/blogs-page.md).

# Blog page

The **Blog page** lists your latest blog posts. The blog page template includes **tag navigation** and options for how blog posts are displayed.

<img src="/files/tLyP0HDrxLdJTIoTSzmB" alt="" width="563">

***

{% columns %}
{% column %}

#### **Set up blog**

Before editing the **Blog page template**, you need to add at least one blog post in your Shopify admin.

You can add custom **Excerpt** text. By default, Stiletto will display the first couple of sentences from your post. You can add a custom excerpt or post tagline.
{% endcolumn %}

{% column %}
{% hint style="success" %}
Blogs are a Shopify feature. 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 %}
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Page layout</h2>

***

Change the number of **articles per page**.

<sub><mark style="color:$info;">Click Blog page section to find settings<mark style="color:$info;"></sub>

<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;">Articles per page</mark></td><td>Set the number of articles to display per page.</td><td><strong>12 - 36</strong></td></tr></tbody></table>

<h2 align="center">Posts style</h2>

***

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

### <mark style="color:$primary;">Change image aspect ratio</mark>

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

<sub><mark style="color:$info;">Click Blog posts section to find settings<mark style="color:$info;"></sub>

<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>Square (1:1)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>

### <mark style="color:$primary;">Change blog post details</mark>

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

<sub><mark style="color:$info;">Click Blog posts section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="212">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show 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>

<h2 align="center">Set up tag navigation</h2>

***

The **Blog** page lets customers filter blog posts by category. Add tags to your blog posts in the Shopify admin to display a row or dropdown menu of article categories.

### <mark style="color:$primary;">Limit tags shown</mark>

{% columns %}
{% column %}
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`.
{% endcolumn %}

{% column %}

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

***

> **Related links**
>
> [Templates](/stiletto/pages/templates.md)\
> [Blog posts template](/stiletto/pages/templates/blog-posts-template.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/pages/templates/blogs-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.