---
description: Here you can apply settings to the layout of the blog pages.
---

# Blogs

{% hint style="success" %}
**Tip:** To edit the page, choose the **Blogs** template in the top drop-down. Then, press the **"Blog posts"** section.
{% endhint %}

## Blog posts

### Layout

Use the **"Dividing line"** drop-down to specify whether to add the line separator on the top or bottom of the "Blog posts" section. If you need to use the line, select its position as "Top", "Bottom", or "Both". To hide the dividing line, use the "None" option.

The **"Top spacing"** option controls the space between the breadcrumbs/Header (if the breadcrumbs are disabled) and the "Blog posts" section. Use the scale from 0 to 100 pixels to set the desired parameter.

Handle the parameters on the **"Bottom spacing"** scale from 0 to 100 pixels to add or remove the space at the bottom of the "Blog posts" section.

Use the **"Center title"** option to align the page title to the center.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fmjgxz7NmSHk7ICg0BH1h%2Fblog%20posts_title.png?alt=media&#x26;token=b27d0774-6ece-4f36-8ca0-9b66fd5098d6" alt=""><figcaption></figcaption></figure>

### Blog post card

To decide the number of articles displayed in each row, use the **"Posts in row"** drop-down. The theme allows setting up 2, 4, or 6 items per row. These settings work for large screens. By default, the theme displays one article in a row on mobile.

Enable **"Show featured image"** to display the blog post's image. Additionally, check whether the image was added as a _Featured image_ in _Shopify admin -> Content -> Blog posts_. Read more about how to set up Blogs and Blog posts in your Shopify admin [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/online-store/blogs).

Change the image size to "Small", "Medium", or "Large". If this is unnecessary to resize the image, select "Adapt to image" in the **"Featured image height"** drop-down. The recommended image ratio is 3:2 (width-to-height respectively).

Control the display of the date and author by enabling or disabling **"Show date"** and **"Show author"**.



In the following example, check how the page might display on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FEqxBlGtcPsTkDFBOJObK%2Fblog%20posts%20page_desktop.png?alt=media&#x26;token=c3528d85-c0f4-4f53-bb8b-7a469fc66bbe" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FTzvPgUiLcYRGz08zDN2u%2Fblog%20posts%20page_mobile.png?alt=media&#x26;token=f19e7c33-0dc8-42e8-8420-30a506c52c63" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
