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

# Blog post page

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fm1gnsLokPboHhEMo7Dwo%2Fimage.png?alt=media&amp;token=91f0377e-cda1-47bf-b23e-cb1297c34b09" alt=""><figcaption></figcaption></figure>

## How to customize your Blog posts section?

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

1. In the theme editor (**Customize**), open the template selector.
2. Select **Blog posts**, then **Default blog post.**
3. On the left-sidebar, add **Product Grid.**
4. Make necessary changes > **Save.**
   {% endhint %}

### General Settings

<table data-full-width="false"><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for section width</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Color</strong></td></tr></tbody></table>

### Section padding

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FGKcXwt8sFkPhwQExyaTx%2Fimage.png?alt=media&amp;token=ad8eb8f9-a86c-473d-a922-2bbb310adb35" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section</td></tr></tbody></table>

### Block setting

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FtzVyvMN9KMNZFQe0ayi1%2Fimage.png?alt=media&amp;token=cca63416-646c-4ebf-b445-cbf5efd6391a" alt=""><figcaption></figcaption></figure>

#### **1. Title**

Display article title

* Show published date
* Show category
* Show author
* Show comment

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

Display article featured image

**Image height:** Adjust the height of the background images

* Adapt to image
* Small
* Medium
* Large

#### **3. Content**

Display article content.

#### **4.** Addons

Display addons:

* Show tags
* Show share button

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

Displaying "Next" and "Back" buttons on blog posts allows readers to easily navigate between previous and next articles, enhancing their browsing experience.

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

Customize the display of related blog posts

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FAoOVj3PKLVF9sJS36KLN%2Fimage.png?alt=media&amp;token=72f18c43-089f-4140-9501-1819f9bc49cc" alt=""><figcaption></figcaption></figure>

#### **7. Related products**

Show a small product carousel at the bottom of a blog post, so readers can buy the products the article talks about. The block holds up to 8 products and displays 3 per row on desktop and tablet.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F8PnMyT2SxrrEkraCBtUo%2Fimage.png?alt=media&amp;token=ce2f1b0f-856f-448e-9057-09a1de66640f" alt=""><figcaption></figcaption></figure>

You can add this block once per blog post template. Add it in **Customize -> Blog posts -> Default blog post -> Add block -> Related products**.

{% hint style="info" %}
**Steps**

1. In the theme editor (**Customize**), open the template selector.
2. Select **Blog posts**, then **Default blog post**.
3. On the left sidebar, add the **Related products** block.
4. Open **Products** and select the products you want to feature.
5. Edit the **Heading** and **Description**, adjust the layout settings, then **Save**.
   {% endhint %}

Until you select products, the block shows placeholder product cards in the theme editor, so you can see the layout before choosing.