> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/blog-post-page.md).

# Blog post page

The **Blog post page** is the layout a reader sees after clicking an article in your blog. It assembles the whole article in one template: the featured image, the title with its publishing details, the body text, tags and sharing buttons, links to the previous and next articles, and a row of related posts at the end.

Every article in your store uses this template, so setting it up once decides how all your content reads. The reader arrives here from the blog list, from a search engine, or from a link you shared, which makes the end of the page the place to keep them moving instead of leaving.

<figure><img src="/files/vnfaCiIh7htmR9P8mtAP" alt=""><figcaption></figcaption></figure>

## How to customize your Blog posts section? <a href="#how-to-customize" id="how-to-customize"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector at the top of the editor.
3. Select **Blog posts**, then **Default blog post**.
4. Open the **Blog post** section in the left sidebar and adjust its settings and blocks.
5. Click **Save**.
   {% endhint %}

*Result:* the preview loads one of your articles, so you can check the layout against real text and a real image rather than placeholders.

### General Settings <a href="#general-settings" id="general-settings"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the article stretches across the screen. Long text is easier to read when the line length stays short.</p><ul><li><strong>Stretch width</strong>: the article runs close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the article lines up with the rest of the store, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the section fills the whole screen and rescales itself to fit it.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors of the article, taken from <strong>Theme settings > Colors</strong>. Pick a scheme with strong contrast, since readers stay on this page longer than on any other.</td></tr></tbody></table>

### Section padding <a href="#section-padding" id="section-padding"></a>

<figure><img src="/files/VDbcfFOWmQYnvlYDlIDq" alt=""><figcaption></figcaption></figure>

| Setting    | Description                                                                                                                     |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the article. Increase it to lift the featured image away from the header or breadcrumb sitting over it.        |
| **Bottom** | Adds space between the end of the article and the footer, so the related posts do not run straight into the bottom of the page. |

### Block setting <a href="#block-setting" id="block-setting"></a>

<figure><img src="/files/k4eQvHCr4ONRGrJzVuL3" alt=""><figcaption></figcaption></figure>

The article is assembled from blocks. Each block below can be reordered or removed, so you decide what a reader meets first and what waits until the end.

#### **1. Title**

Shows the article title, with optional details underneath it.

| Setting                 | Description                                                                                                                  |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Show published date** | Prints the date the article went live. Useful for news and launches, worth hiding on evergreen guides that would look dated. |
| **Show category**       | Shows which blog the article belongs to, so readers can tell a buying guide from a news post at a glance.                    |
| **Show author**         | Names the person who wrote the article, which adds weight to advice and opinion pieces.                                      |
| **Show comment**        | Shows the comment count with the article details, so readers can see whether a discussion is already running.                |

#### **2. Featured image**

Shows the article image at the top of the page, the first thing a reader sees.

| Setting          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image height** | <p>How much vertical space the image takes before the text starts.</p><ul><li><strong>Adapt to image</strong>: keeps the original proportions, so nothing is cropped.</li><li><strong>Small</strong>: the text starts almost immediately, which suits short news posts.</li><li><strong>Medium</strong>: a balance between the image and the opening lines.</li><li><strong>Large</strong>: gives the photo the whole first screen, best for visual storytelling.</li></ul> |

#### **3. Content**

The body of the article, exactly as written in the Shopify admin. Place it after the title and image so the reader meets the text once the context is set.

#### **4.** Addons

Extra elements shown around the article body.

| Setting               | Description                                                                                                                              |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Show tags**         | Lists the tags of the article, giving readers a way to find other posts on the same subject.                                             |
| **Show share button** | Adds the buttons a reader uses to send the article to social media or messaging, which is how blog content spreads without paid traffic. |

#### **5. Prev and next articles**

Adds Next and Back links at the end of the article, so a reader who finished one post moves straight to the neighbouring one instead of returning to the list.

#### **6. Related articles**

Shows a row of further articles under the one just read. It is the last chance to keep a reader on the store, so leave it on unless your blog has only a handful of posts.

<figure><img src="/files/TbdPC0ncrjWsBzM9NfSs" alt=""><figcaption></figcaption></figure>

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Readers get a full article layout with image, author details, sharing, and follow-on reading, instead of a bare block of text.
* The blocks you keep at the end (previous and next, related articles) decide whether a reader leaves after one post or keeps browsing.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Blog page](/velare/customize-your-pages/blog-page.md): the list readers come from before landing here
* [Layout](/velare/set-up-your-store/layout.md): the page content width used by **Fixed width**
* [Colors](/velare/set-up-your-store/colors.md): the schemes offered in **Color scheme**


---

# 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://uxsmart.gitbook.io/velare/customize-your-pages/blog-post-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.