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

# Blog

The Blog Page displays all articles from your blog in an organized grid layout. This page serves as the main hub for your blog content, allowing visitors to browse, read, and discover articles. The page automatically shows all published blog articles, making it easy for customers to find and read your content. This is particularly useful for stores that publish regular blog posts, news updates, style guides, product stories, or any other written content that helps engage customers and provide value beyond just selling products.

The Blog Page is typically accessed through your store's navigation menu or can be set as a dedicated blog landing page. It provides a visual overview of all your blog articles, helping visitors understand what content is available and making it easy for them to find articles that interest them. The page supports filtering by tags, allowing visitors to narrow down articles by topic or category.

## Main Section: Blog Posts

The Blog Posts section displays all blog articles in a customizable grid layout. You can control how many articles appear per page, how they're arranged, what information is displayed on each article card, and whether visitors can filter articles by tags. The section includes settings to customize the heading, layout, article card appearance, and spacing to create a professional and engaging blog experience.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FELm0LiQz01nOiT06XGRK%2Fimage.png?alt=media&amp;token=40cb2e7a-4b59-40da-9225-b10cfd55ae7b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Templates** > **Blog**.
3. Configure the **sections** and **blocks**.
4. Preview live, then click **Save**.
   {% endhint %}

### Settings

#### Heading content

* **Heading size**: Control the size of the blog page heading. Options range from h4 (smallest) to hxxl (extra large) to match your design preferences. The heading automatically displays the blog title.
* **Underline**: When enabled, adds a decorative underline beneath the heading for visual emphasis.
* **Text position**: Control how the heading is aligned. Options include Left (left-aligned), Center (centered), or Right (right-aligned). This helps position the heading to match your page design.

#### Tag filter

* **Enable tag filter**: When enabled, displays a filter bar that allows visitors to filter blog articles by tags. This helps visitors quickly find articles on specific topics or categories. Tags are created when you write blog articles in your Shopify admin.
* **Filter card style**: When tag filter is enabled, choose the visual style of the filter buttons. Options include Bordered (filter buttons with borders), Elevated (filter buttons with shadow/elevation effect), or Underline (filter buttons with underline styling). This controls how the filter buttons appear visually.

#### Layout

* **Top padding**: Add space above the blog articles grid. Options range from 0px (no space) to 400px in 10px increments. This controls the spacing between the heading/filter area and the article grid.
* **Articles per page**: Control how many articles are displayed on each page before pagination. Options range from 7 to 24 articles. More articles per page reduce pagination but may make pages load slower, while fewer articles create faster-loading pages with more navigation.
* **Columns**: Control how many articles appear side by side on desktop screens. Options include 2 columns, 3 columns, or 4 columns. More columns create a more compact layout showing more articles at once, while fewer columns make each article more prominent and easier to read.
* **Highlighting the first article**: When enabled, the first article in the grid is displayed with special highlighting, making it larger or more prominent than the other articles. This helps draw attention to your featured or most recent article.
* **Mobile columns**: Control how many articles appear side by side on mobile devices. Options include 1 column (articles stacked vertically) or 2 columns (articles side by side). Two columns show more articles at once but make each article smaller.
* **Full width**: When enabled, the blog articles grid spans the full width of the browser window instead of being contained within the page width. This gives the grid a more immersive look and shows more articles side by side.
* **Colors**: Choose a color scheme for the blog section background. This affects the overall appearance of the blog page.

#### Blog cards

* **Image ratio**: Control the shape of article images on blog cards. Options include Landscape (wide images), Portrait (tall images), Square (equal width and height), or Tall (extra tall images). Choose the ratio that best showcases your article images and matches your design aesthetic.
* **Date**: When enabled, displays the publication date on each blog card. This helps visitors see how recent the content is and can help them find timely information.
* **Author**: When enabled, displays the author name on each blog card. This is useful if you have multiple authors or want to give credit to content creators.
* **Tags**: When enabled, displays article tags on each blog card. Tags help visitors understand what topics the article covers and can help them find related content.
* **Excerpt**: When enabled, displays a short excerpt or summary of the article content on each blog card. This gives visitors a preview of the article content, helping them decide if they want to read the full article.

#### Padding

* **Padding top**: Add space above the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display.
* **Padding bottom**: Add space below the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display.

***

### Tips

* Enable the tag filter to help visitors find articles on specific topics quickly. This is especially useful if you publish articles on diverse topics or have a large number of blog posts.
* You can use the "Highlighting the first article" feature to draw attention to your featured or most recent article. This helps ensure important content gets noticed first.
* Show article excerpts to give visitors a preview of content before they click through. Well-written excerpts can increase click-through rates and help visitors find relevant content.
* Display tags on blog cards to help visitors understand article topics at a glance. Tags also help with discoverability and can encourage visitors to explore related content.
* Use the image ratio that works best with your article photography style. Landscape ratios work well for wide hero images, while square ratios are great for consistent card layouts.
