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

<figure><img src="/files/9wNAr4XrDQQprJeunSwR" alt=""><figcaption></figcaption></figure>

## **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, Cornerstone will display the first couple of sentences from your post. You can add a custom excerpt or post tagline.

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

## **Edit blog page template**

***

In your theme editor (**Customize**), use the **Templates selector** to open **Blogs > Default blog**.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Use the **Templates selector** to open **Blogs > Default blog**.
2. Under **Template**, click the **Blog posts** section to open the settings.
3. Choose how many **Articles per page** to display: between **12** and **36**.
4. Choose the **Number of columns on desktop** to display: **2**, **3**, or **4**.
5. Choose which blog post details to display: **Show tags**, **Show author**, or **Show published date** of the blog post.
6. Choose whether **Show excerpt** of the blog posts.

   > By default, Cornerstone will display the first couple of sentences from your post. You can add a custom excerpt or post tagline.
7. Choose to **Show featured images** of blog posts.

   > Go to your Shopify admin to upload images for your blog posts.
8. To make your blog images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of your image.

   ![](/files/7AsjidOO6migDlLE3fAb)
9. (*Optional*.) Add theme sections to further customize the design and layout of your blogs page.

   > You can click the **Hide icon** or **Remove section** button to hide or delete sections.
10. Click **Save**.

</details>

## Change layout

***

Change the layout of posts by adjusting the number of articles and columns.

`Click Blog page section to find settings`

<table><thead><tr><th width="204">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of articles per page</mark></td><td>Choose how many posts to show on each page before visitors need to go to the next page or load more: between <strong>12</strong> and <strong>36</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many posts to show per row: either <strong>2, 3</strong>, or <strong>4</strong>.</td></tr></tbody></table>

## Customize posts style

***

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

* Choose which **post details** to show
* Change the **image aspect ratio** of post images
* Display posts in **text boxes** with custom background colors

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

`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 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><tr><td><mark style="color:blue;">Show featured image</mark></td><td>Show the blog post image added in your Shopify admin.</td></tr></tbody></table>

### 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;">Featured 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><p><strong>Natural</strong><br><strong>Portrait (2:3)</strong></p><p><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong></p><p><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></p></td></tr></tbody></table>

## Show text boxes

***

Choose to display blog posts as tiles with color backgrounds. You can show tiles with shadows or borders.

<div><figure><img src="/files/qhZUnsqfDBX5ysAk93Dz" alt=""><figcaption><p>Soft shadow</p></figcaption></figure> <figure><img src="/files/FmKn128gZRi3tR7Negz2" alt=""><figcaption><p>Solid shadow</p></figcaption></figure> <figure><img src="/files/KvRyTBtjKhkKNQSF8mRr" alt=""><figcaption><p>Border</p></figcaption></figure></div>

`Click Blog page section to find settings`

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show text boxes</mark></td><td>Choose to show a border around the blog post images and text content.</td></tr><tr><td><mark style="color:blue;">Text box style</mark></td><td>Display text boxes with a <strong>Soft drop shadow</strong>, <strong>Solid drop shadow</strong>, or <strong>Borders</strong> with different thicknesses.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><p>Change the color scheme applied to the blog post tiles.<br><br>Select the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default colors: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You may also select one of the two custom color schemas.</p><p><br>Learn more about <a href="/pages/7UqaWJHr530MKWscpEMp#color-schemes">Color schemes</a>.</p></td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Check this option to apply custom colors to the section.<br><br>These colors will override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for all text in the blog post tile.<br><br>This setting applies only if the Override with custom colors option is enabled.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for background of the blog post tile.<br><br>This setting applies only if the Override with custom colors option is enabled.</td></tr></tbody></table>

## Set up tag navigation

***

You can use blog posts tags to allow visitors to filter posts by category. Blog post tags appear as a row or dropdown menu.

<figure><img src="/files/gYKMGGi0HFnAblnHRKF9" alt="" width="375"><figcaption><p>Tag navigation as dropdown on mobile device</p></figcaption></figure>

### Edit blog posts tags

***

Go to **Online Store > Blog posts** to edit your posts. In the **Tags** field, enter tags separated by commas or select existing tags.

### Choose which tags to show

***

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, separated by commas. For example: `News, Lifestyle, Tutorials, Reviews`.

`Click Blog posts section to find settings`

<table><thead><tr><th width="213">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show tag navigation</mark></td><td>Display blog post tags to allow visitors to filter posts by category. By default, all post tags are used as article categories.<br><br>To limit which tags to use, go to Theme settings > Blog. In the Article categories field, enter the tags you want to use, separated by commas.</td></tr><tr><td><mark style="color:blue;">Tab design</mark></td><td>Select the style of the article categories: <strong>Line</strong> displays selected tags underlined; <strong>Contained</strong> displays selected tags in a colored box.</td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Choose the font for the tags: either the <strong>Body</strong> or <strong>Heading</strong> font from your theme settings.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Increase or decrease the size of the tag text: between <strong>3</strong> to <strong>8</strong>.</td></tr></tbody></table>

\\

***

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


---

# 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/cornerstone/pages/templates/blogs-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.