# 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="../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FIzR2ZSJgXdZe8HdBsmOP%2Fshare-sheet.png?alt=media&#x26;token=a16d87bf-c60a-482a-92d1-68a2cb7b690e" 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. |