# 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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FzdEG5fFdyLUz3EXT321B%2Fblogs-page.png?alt=media&#x26;token=3c1c5bb1-ee25-42d0-a1b0-8d2cf08b1e28" 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.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-a1c288a8c20161326a93dce363d3dfe30bf321af%2Faspect-ratio.png?alt=media)
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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FepGjvRqWoaBE1gIu6C6P%2Fblog-box-soft-shadow.png?alt=media&#x26;token=f736623e-e796-4b2c-aa1f-903115bc70df" alt=""><figcaption><p>Soft shadow</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FRj1m0atvtmfzqg41LrNu%2Fblog-box-solid-shadow.png?alt=media&#x26;token=0cefa65c-1ac4-456f-9a81-b5d984abac4a" alt=""><figcaption><p>Solid shadow</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fvybs7IqnY4tgbmXEFTXr%2Fblog-box-border.png?alt=media&#x26;token=2eeb7836-b679-4850-9f6b-086a8e9a590f" 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="../../../theme-styles/colors#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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FDIj3p00ujwuTnAhRBF6E%2Fblog-tag-nav.png?alt=media&#x26;token=ec7bb0db-a065-4a40-be50-bcd6dca38850" 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](https://help.fluorescent.co/cornerstone/pages/templates)\
> [Blog posts template](https://help.fluorescent.co/cornerstone/pages/templates/blog-posts-template)