Skip to main content
The Featured Blog Posts section displays articles from a selected blog with flexible layout options and customizable card designs.

Schema Location

File: sections/featured-blog-posts.liquid:61-494

Features

  • Blog article selection
  • 3 layout types: Grid, Carousel, Editorial
  • Post limit control (2-10 posts)
  • Mobile carousel option
  • Customizable navigation
  • Article excerpt support
  • Author and date display

Settings

Blog Selection

blog
blog
Select the blog to feature articles fromNote: If no blog is selected, placeholder content will display

Layout Configuration

layout_type
select
default:"grid"
Display layout for blog postsOptions:
  • grid - Equal column grid layout
  • carousel - Horizontal scrollable carousel
  • editorial - Magazine-style editorial layout
Enable carousel mode on mobile devicesVisible when: layout_type != 'carousel'
post_limit
range
default:"3"
Number of blog posts to displayRange: 2-10, step 1
columns
range
default:"3"
Number of columns on desktopRange: 1-8, step 1
Visible when: layout_type == 'grid' or 'carousel'
mobile_columns
select
default:"2"
Number of columns on mobileOptions:
  • 1 - Single column
  • 2 - Two columns
Visible when: Grid layout without mobile carousel
mobile_card_size
select
default:"60cqw"
Card size on mobile for carouselOptions:
  • 60cqw - ~1 card visible
  • 44cqw - ~2 cards visible
Visible when: Carousel layout or mobile carousel enabled
columns_gap
range
default:"16"
Horizontal spacing between cardsRange: 0-100px, step 1
Visible when: Grid or carousel layout
rows_gap
range
default:"16"
Vertical spacing between rowsRange: 0-100px, step 1
Visible when: Grid layout
icons_style
select
default:"arrow"
Navigation icon styleOptions:
  • arrow - Arrow icons
  • chevron - Chevron icons
  • arrows_large - Large arrow icons
  • chevron_large - Large chevron icons
  • none - No navigation icons
Visible when: Carousel layout or mobile carousel enabled
icons_shape
select
default:"none"
Background shape for navigation iconsOptions:
  • none - No background
  • circle - Circular background
  • square - Square background
Visible when: Icons enabled

Section Layout

section_width
select
default:"page-width"
Section container widthOptions:
  • page-width - Constrained to page width
  • full-width - Full viewport width
gap
range
default:"12"
Gap between section elementsRange: 0-100px, step 1
color_scheme
color_scheme
default:"scheme-1"
Section color scheme

Padding

padding-block-start
range
default:"32"
Top padding in pixelsRange: 0-100px, step 1
padding-block-end
range
default:"32"
Bottom padding in pixelsRange: 0-100px, step 1

Static Blocks

1. Blog Title Block

Type: _featured-blog-posts-title
ID: static-blog-title
Displays the blog title or custom heading. Default Content:
{% raw %}
<h3>{{ closest.blog.title }}</h3>
{% endraw %}

2. Blog Post Card Block

Type: _featured-blog-posts-card
ID: static-blog-post-card
Renders each blog post with customizable child blocks. Child Blocks:
  • _heading - Article title
  • _blog-post-info-text - Author and date
  • _blog-post-description - Article excerpt

Implementation

Article Loading

{% raw %}
{% liquid
  assign max_items = section.settings.post_limit
%}

{% if section.settings.blog != blank and section.settings.blog.articles_count > 0 %}
  {% paginate section.settings.blog.articles by max_items %}
    {% assign section_articles = section.settings.blog.articles %}
  {% endpaginate %}
{% else %}
  {% comment %} Generate placeholder array {% endcomment %}
  {% assign section_articles = '' %}
  {% for i in (1..max_items) %}
    {% assign section_articles = section_articles | append: ', ' %}
  {% endfor %}
  {% assign section_articles = section_articles | split: ',' %}
{% endif %}
{% endraw %}
From featured-blog-posts.liquid:1-33

Article Card Loop

{% raw %}
{% for article in section_articles limit: max_items %}
  <div class="resource-list__item">
    {% content_for 'block', 
       id: 'static-blog-post-card', 
       type: '_featured-blog-posts-card', 
       article: article, 
       closest.article: article 
    %}
  </div>
{% endfor %}
{% endraw %}
From featured-blog-posts.liquid:36-43

Blog Card Components

Article Title

{
  "type": "_heading",
  "settings": {
    "text": "<h4>{{ closest.article.title }}</h4>",
    "show_alignment": false
  }
}

Article Info (Author & Date)

{
  "type": "_blog-post-info-text",
  "settings": {
    "padding-block-start": 0,
    "padding-block-end": 0,
    "show_alignment": false
  }
}

Article Excerpt

{
  "type": "_blog-post-description",
  "settings": {
    "padding-block-start": 8,
    "padding-block-end": 0
  }
}

Presets

The section includes 3 presets: Category: Storytelling Settings:
  • Layout: carousel
  • Post limit: 5
  • Columns: 3
  • Columns gap: 8px
  • Mobile card size: 60cqw
  • Icons: arrow with circle background
  • Padding: 48px top/bottom
Blocks:
  • Blog title (H3)
  • Article cards with title, info, and excerpt

2. Blog Posts Grid

Category: Storytelling Settings:
  • Layout: grid
  • Post limit: 3
  • Columns: 3
  • Mobile columns: 2
  • Carousel on mobile: disabled
  • Gaps: 8px
  • Padding: 48px top/bottom
Blocks:
  • Blog title (H3)
  • Article cards with title, info, and excerpt

3. Blog Posts Editorial

Category: Storytelling Settings:
  • Layout: editorial
  • Post limit: 3
  • Carousel on mobile: disabled
  • Large gap: 64px
  • Padding: 48px top/bottom
Blocks:
  • Blog title (H3)
  • Article cards with title, info, and excerpt

Resource List Rendering

{% raw %}
{% render 'resource-list',
  list_items: list_items,
  list_items_array: list_items_array,
  settings: section.settings,
  carousel_ref: 'featuredBlog',
  slide_count: max_items,
  content_type: 'articles',
  test_id: 'featured-blog-posts'
%}
{% endraw %}
From featured-blog-posts.liquid:50-58

Liquid Variables

The section provides these variables to child blocks:
  • closest.blog - The selected blog object
  • closest.article - Current article in loop
  • article - Current article (also passed directly)

Available Article Properties

{% raw %}
{{ article.title }}          {# Article title #}
{{ article.url }}            {# Article URL #}
{{ article.author }}         {# Article author #}
{{ article.published_at }}   {# Publication date #}
{{ article.excerpt }}        {# Article excerpt #}
{{ article.content }}        {# Full article content #}
{{ article.image }}          {# Featured image #}
{{ article.tags }}           {# Article tags #}
{% endraw %}

Styling

The section uses these CSS classes:
.section-resource-list {
  /* Main container */
}

.resource-list__item {
  /* Individual article card wrapper */
}

.featured-blog-posts {
  /* Section-specific class */
}

.spacing-style {
  /* Padding utilities */
}

.gap-style {
  /* Gap utilities */
}

Pagination Note

The section uses Shopify’s {% paginate %} tag to load articles. The pagination limit is set to max_items (post_limit setting).

Accessibility

  • Article titles use proper heading hierarchy (H3 for section, H4 for articles)
  • Article content wrapped in semantic elements
  • Links are descriptive and contextual
  • Article images include alt text
  • Dates are machine-readable with proper formatting
  • Author information is clearly associated with articles

Performance Tips

Post Limit: Keep the post limit between 3-6 for optimal performance. More posts increase load time and may overwhelm users.
Editorial Layout: The editorial layout works best with 3-4 posts due to its spacious design. More posts may create excessive scrolling.

Common Use Cases

Homepage Blog Preview

Show latest 3-5 blog posts in carousel format. Settings:
  • Layout: carousel
  • Post limit: 5
  • Icons: arrow with circle

Blog Archive Page

Display blog posts in grid format for easy scanning. Settings:
  • Layout: grid
  • Columns: 3
  • Mobile columns: 2
  • Post limit: 6-9
Highlight important blog posts with editorial layout. Settings:
  • Layout: editorial
  • Post limit: 3
  • Large gap for emphasis

News Section

Quick news updates in compact grid. Settings:
  • Layout: grid
  • Columns: 4
  • Mobile columns: 2
  • Minimal card design

Main Blog

Full blog page template

Blog Post

Individual article template

Carousel

General content carousel

Build docs developers (and LLMs) love