> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog Articles

> Showcase selected blog posts or articles with multiple layouts and flexible metadata options.

The Blog Articles section showcases selected blog posts or articles from a Shopify blog. It supports multiple layouts, flexible card settings, and optional metadata such as author, date, and excerpts.

Blog articles help drive content engagement by featuring editorial content, company updates, or educational resources directly within your storefront pages.

<img src="https://mintcdn.com/digifist/UribgkjDWqT84P69/images/theme/release/sections/blog-articles/blog-articles-overview.png?fit=max&auto=format&n=UribgkjDWqT84P69&q=85&s=223fb15f395cf8933902c942155002dd" alt="Blog Articles section overview" width="3280" height="2186" data-path="images/theme/release/sections/blog-articles/blog-articles-overview.png" />

## What this section controls

This section controls blog article displays with the following capabilities:

* Automatic or manual article selection from Shopify blogs
* Multiple layout options for article cards
* Customizable metadata display (author, date, excerpt)
* Flexible card aspect ratios and spacing
* Section-level "View all" button
* Desktop and mobile responsive design

## How the Blog Articles section works

The Blog Articles section uses a blog-based content system:

* Displays articles from a selected Shopify blog
* Supports automatic or manual article selection
* Articles are shown as cards with optional metadata
* Layout and spacing can be customized
* Fully responsive across desktop and mobile

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Add Blog Articles section">
    Add the Blog Articles section to your page or template.
  </Step>

  <Step title="Select blog source">
    Choose which Shopify blog to pull articles from.
  </Step>

  <Step title="Configure layout">
    Adjust layout, metadata visibility, and card settings.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/nOHZQTqw6vVWyeWX/images/theme/release/sections/blog-articles/blog-articles-location.png?fit=max&auto=format&n=nOHZQTqw6vVWyeWX&q=85&s=a451430883e64b29fc8e50da16a5fd21" alt="Blog Articles section in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/blog-articles/blog-articles-location.png" />

## Section settings

Section settings control the overall structure, content source, and visual layout.

<Tabs>
  <Tab title="Content">
    ### Heading

    Main title of the section.

    * Rich text supported (bold, italic, underline, links)

    ### Heading size

    Controls the size of the heading.

    **Available options:** S, M, L, XL

    ### Blog

    Selects which Shopify blog the articles are pulled from.

    * Shopify blog selector

    <Note>
      If manual article blocks are added, they will override the automatic blog selection order.
    </Note>

    ### Button label

    Text displayed for the section-level action button (for example, "View all articles").

    * Text input
    * Leave empty to hide the button

    <img src="https://mintcdn.com/digifist/S9kUPjhQ5Gtf_9hS/images/theme/release/sections/blog-articles/content-settings.png?fit=max&auto=format&n=S9kUPjhQ5Gtf_9hS&q=85&s=a1c22c98dd7a1f0b7c5069e9fdeab665" alt="Content configuration settings" width="3280" height="2186" data-path="images/theme/release/sections/blog-articles/content-settings.png" />
  </Tab>

  <Tab title="Layout settings">
    ### Layout

    Defines the overall card layout style.

    **Available options:** Layout 1, Layout 2

    <img src="https://mintcdn.com/digifist/HDEnaKCUz3NsOMoP/images/theme/release/sections/blog-articles/layout-options.png?fit=max&auto=format&n=HDEnaKCUz3NsOMoP&q=85&s=c75979f6b4ccaab3043a0b32bea1bb4a" alt="Layout style options" width="3280" height="2186" data-path="images/theme/release/sections/blog-articles/layout-options.png" />

    ### Card media ratio

    Controls the aspect ratio of article images.

    **Available options:** 1:1, 2:3, 3:2, 3:4, 4:3

    ### Show excerpt

    Toggles the article excerpt visibility.

    **Options:** True / False

    ### Show date

    Toggles the article publish date visibility.

    **Options:** True / False

    ### Show author

    Toggles the article author visibility.

    **Options:** True / False

    ### Show read more

    Toggles the "Read more" link on article cards.

    **Options:** True / False

    <img src="https://mintcdn.com/digifist/fMZLQH2GJ9HlgJFK/images/theme/release/sections/blog-articles/metadata-settings.png?fit=max&auto=format&n=fMZLQH2GJ9HlgJFK&q=85&s=6bea0dcfec9d6098679f7fd6808521c7" alt="Metadata visibility settings" width="3280" height="2186" data-path="images/theme/release/sections/blog-articles/metadata-settings.png" />

    ### Content alignment

    Controls horizontal alignment of text content inside article cards.

    **Available options:** Start, Center, End

    ### Button style

    Defines the visual style of buttons within the section.

    **Available options:** Filled, Outlined, Text

    ### Inner spacing

    Controls spacing inside each article card.

    **Available options:** No, S, M, L, XL

    <img src="https://mintcdn.com/digifist/1vEBlAbNb1e5tYeg/images/theme/release/sections/blog-articles/card-styling.png?fit=max&auto=format&n=1vEBlAbNb1e5tYeg&q=85&s=22b75d52573a3b882340d7821e49954e" alt="Card styling options" width="3280" height="2186" data-path="images/theme/release/sections/blog-articles/card-styling.png" />
  </Tab>
</Tabs>

## Block settings

Block settings allow manual article selection. Article blocks override automatic blog ordering.

<Tabs>
  <Tab title="Article block">
    ### Article

    Selects a specific Shopify article to display.

    * Shopify article selector
    * Overrides automatic blog ordering

    <img src="https://mintcdn.com/digifist/GSXlGcV9jkYdVus7/images/theme/release/sections/blog-articles/article-selection.png?fit=max&auto=format&n=GSXlGcV9jkYdVus7&q=85&s=fe84b60eb117fcea74c377fb086cee96" alt="Manual article selection" width="3280" height="2186" data-path="images/theme/release/sections/blog-articles/article-selection.png" />
  </Tab>
</Tabs>

## Best practices

* Use manual article blocks to highlight key content or featured posts
* Keep excerpts enabled for editorial or storytelling layouts to provide context
* Hide author or date for more minimal designs focused on visual impact
* Ensure consistent image aspect ratios across articles for visual harmony
* Limit visible metadata to improve readability and reduce visual clutter
* Use "View all" button to drive traffic to your main blog page
* Test different layouts to see which works best for your content style
* Consider card spacing based on the amount of metadata shown
* Update featured articles regularly to keep content fresh

## Common use cases

* **Blog previews on homepage** - Showcase latest articles to drive content discovery
* **Editorial storytelling sections** - Highlight long-form content and brand narratives
* **Content marketing highlights** - Feature educational or promotional articles
* **Brand updates or announcements** - Share company news and product launches
* **SEO-focused article promotion** - Drive traffic to high-value blog content

## Related guides

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>