# Blog

The **Blog** section is designed to display a collection of blog posts in a visually appealing layout. This section allows merchants to control layout styling, display metadata (like author, date, tags), adjust the image presentation, and apply custom colors or gradients.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FJbsnnUduj0t5FeTGcfXS%2Fblog-section.gif?alt=media&#x26;token=9fbd2c5d-fa83-457a-a7d5-57b132da6090" alt=""><figcaption></figcaption></figure>

## Section settings

<table><thead><tr><th width="207.689208984375">Settings</th><th width="176.35845947265625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Default blog image</td><td align="center"><code>image_picker</code></td><td>Sets a fallback image when a blog post lacks a featured image.</td></tr><tr><td>Image replacement color</td><td align="center"><code>select</code></td><td>Background color used when a post image is missing: <code>Accent color</code>, <code>Default color</code>, or <code>None</code>.</td></tr><tr><td>Blog style</td><td align="center"><code>select</code></td><td>Determines layout style: <code>Standard</code> or <code>Photo background</code>.</td></tr><tr><td>Posts per row</td><td align="center"><code>range</code></td><td>Number of posts shown per row on desktop.</td></tr><tr><td>Image aspect ratio</td><td align="center"><code>range</code></td><td>Controls image shape (0.5:1 to 1.5:1).</td></tr><tr><td>Show RSS icon</td><td align="center"><code>checkbox</code></td><td>Toggles visibility of an RSS feed icon.</td></tr><tr><td>Show date</td><td align="center"><code>checkbox</code></td><td>Displays the publish date of blog posts.</td></tr><tr><td>Show author</td><td align="center"><code>checkbox</code></td><td>Displays the author's name.</td></tr><tr><td>Show tags</td><td align="center"><code>checkbox</code></td><td>Toggles the visibility of post tags.</td></tr><tr><td>Show comment count</td><td align="center"><code>checkbox</code></td><td>Shows number of comments per post.</td></tr><tr><td>Tag alignment</td><td align="center"><code>select</code></td><td>Positions tags: <code>Left</code> or <code>Center</code> aligned.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Select a predefined color scheme.</td></tr><tr><td>Overlayed text</td><td align="center"><code>color</code></td><td>Select colors for overlay text.</td></tr><tr><td><strong>Section spacing</strong></td><td align="center"></td><td></td></tr><tr><td>Padding top</td><td align="center"><code>range</code></td><td>Top spacing of the section.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Bottom spacing of the section.</td></tr></tbody></table>

### Layout and Articles

Controls to customize the layout of your blog index page, and you can adjust the image aspect ratio with the range slider.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FwVtZX5NX9fYauXrfwgQx%2Flayout-articles-blog.jpg?alt=media&#x26;token=7cc64600-628b-4b00-8467-7a10501b3633" alt=""><figcaption></figcaption></figure>

> **Tip:** use show tags to display the navigation tabs which allows readers to filter though your articles

## **Tips and Usage**

* To maintain design consistency, use the same **aspect ratio** across all posts.
* Use the **Photo background** style for more visual impact on image-heavy blogs.
* If no image is available, consider setting a **Default blog image** or using an **Image replacement color** to preserve the layout structure.
* Enable the **RSS icon** if you want to allow users to subscribe to blog updates.
