# Blog post

The **Blog Post template** provides the design and layout of your blog post articles. Publish **Blog posts** to share store announcements, updates, and featured content, and help increase organic traffic to your site.

{% hint style="info" %}
Check out Shopify's guide on [How to start a blog and grow your audience](https://www.shopify.com/blog/how-to-start-a-blog).
{% endhint %}

## Add blog posts in Shopify admin

***

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

Blog posts use the **Featured image**, **Title**, **Content**, **Tags**, **Published date** and **Author**.

{% hint style="success" %}
Blog posts are a Shopify feature. Learn how 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 %}

## Customize page style

***

Click the page section to edit the **general styles**, available for all page templates:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Color scheme</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td><a href="/files/OZ4h4v0qfTnncw43MKk6">/files/OZ4h4v0qfTnncw43MKk6</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td><a href="/files/lMLsRWOpgxDLC0CvtnAt">/files/lMLsRWOpgxDLC0CvtnAt</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td><a href="/files/3ddmAtuVNo9MtYTf38ov">/files/3ddmAtuVNo9MtYTf38ov</a></td></tr></tbody></table>

## Customize post title block

***

The **Title block** display the blog post title. You can customize the title width and text size.

`Click Title block 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;">Full width title</mark></td><td>Display the title at full width</td><td></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Set the size of the blog post title</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 6</mark></td></tr></tbody></table>

### Show blog post details

***

By default, posts display the published date, author, and tags. Click **Blog post** 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 %}

<table><thead><tr><th width="224">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show article tags</mark></td><td>Display tags associated with the blog post</td></tr><tr><td><mark style="color:blue;">Show author</mark></td><td>Display the author of the blog post</td></tr><tr><td><mark style="color:blue;">Show published date</mark></td><td>Display the date the blog post was published</td></tr></tbody></table>

## Change featured image size

***

Change the **width** and **height** of the featured image, for both desktop and mobile screens.

{% hint style="success" %}
The blog posts template display the **featured image** added in your Shopify admin. Go to your Shopify admin to upload images for your blog posts.
{% endhint %}

`Click Featured image block 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;">Width</mark></td><td>Set the width of the featured image</td><td><strong>Full width</strong><br><strong>Full width padded</strong><br><strong>Page width</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Image height</mark></td><td>Set the height of the featured image</td><td><strong>Adapt to image</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Custom</strong></td></tr><tr><td><mark style="color:blue;">Custom desktop height</mark></td><td>For desktop, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>250 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 450px</mark></td></tr><tr><td><mark style="color:blue;">Custom mobile height</mark></td><td>For mobile, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>150 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 350px</mark></td></tr></tbody></table>

## Enable post comments

***

In the Shopify admin, you can choose to enable comments. The comment form includes fields for Name, Email, and Message.

{% hint style="success" %}
Blog posts comments are a Shopify feature. See Shopify's guides for [Managing comments on blog posts](https://help.shopify.com/en/manual/online-store/blogs/managing-comments).
{% endhint %}

## Show share buttons

***

By default, the **Share block** displays icons for sharing your post to social media. Use the drag-and-drop handles to **re-order** the block or **remove** the block.

### Enable native OS sharing

***

Enable **native OS sharing** to replace share icons with sharing options on a user’s device. Visitors can share the blog post through apps like Messages, Email, or their social media apps.

<figure><img src="/files/1NPNP7cGngCfnpp9aklo" alt="" width="293"><figcaption></figcaption></figure>

`Click Share block to find settings`

| Setting                                                   | Description                                                                                   |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">Enable native OS sharing</mark> | When enabled, a "Share this" link will open the native sharing options for the user's device. |


---

# 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/eclipse/pages/blog-post-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.