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

# Blog posts

## Blog posts

{% hint style="success" %}
The section includes the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">Post list</mark>](#post-list)" blocks for content setup.
{% endhint %}

### Content

{% hint style="warning" %}
**Note!** Before setting up the "Blog posts" section, ensure you have created articles in your *Shopify admin -> Content -> Blog posts*. Learn how to add and edit Blogs and Blog posts [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/online-store/blogs).
{% endhint %}

**Blog**\
Choose a blog to display blog posts in the section.

**Posts per row**\
Set the number of articles displayed per row: 2, 4, or 6.\ <mark style="color:orange;">**Note!**</mark> Works only for large screens. By default, the theme displays one article per row on mobile.

**Set item count manually**\
Enable this option to manually specify the number of articles displayed instead of using the automatically generated amount.

**Maximum posts**\
Set the maximum number of articles to display.

### Layout options <a href="#layout-options" id="layout-options"></a>

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the left.
* **"Stacked"**. Content is left-aligned.
* **"Centered"**. Centers content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.
* **"Center"**. Centers content.

**Use swipe on mobile**\
Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Transparent header

Allow the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/xDpWdklgubUksjZcZ2BR" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/xFcWdZ7MbrFGZGBRe0fg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Post list

Set the changes to the blog cards using the block.

**Show image**\
Enable the option to display an image related to each article in the blog. The recommended image size is 3:2. Read the details about image aspect ratio [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor#understanding-image-aspect-ratio).

**Image ratio**\
Use the options to adapt a media to the desired size. Several available options can be selected from the drop-down. If an option includes additional settings, they will appear underneath the drop-down after selecting an option:

* **"Adapt to image"**. Displays an image in its original aspect ratio.
* **"Aaspect ratio"**. Select the option to adjust a media height as a percentage using the **"Aspect ratio"** scale. The parameters can be changed from 10% to 210%\*.

  \*The "Aspect ratio" option is applied to mobile by default.

**"Aspect ratio"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

**Show date**\
Check the option to show the release date of each blog post.

**Show author**\
Enable the option to display a blog's author.

**Centered content**\
Enable the option to center title, date/author, and excerpt.