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
Select the blog to feature articles fromNote: If no blog is selected, placeholder content will display
Layout Configuration
Display layout for blog postsOptions:
grid- Equal column grid layoutcarousel- Horizontal scrollable carouseleditorial- Magazine-style editorial layout
Enable carousel mode on mobile devicesVisible when:
layout_type != 'carousel'Number of blog posts to displayRange: 2-10, step 1
Grid & Carousel Layout
Number of columns on desktopRange: 1-8, step 1
Visible when:
Visible when:
layout_type == 'grid' or 'carousel'Number of columns on mobileOptions:
1- Single column2- Two columns
Card size on mobile for carouselOptions:
60cqw- ~1 card visible44cqw- ~2 cards visible
Horizontal spacing between cardsRange: 0-100px, step 1
Visible when: Grid or carousel layout
Visible when: Grid or carousel layout
Vertical spacing between rowsRange: 0-100px, step 1
Visible when: Grid layout
Visible when: Grid layout
Carousel Navigation
Navigation icon styleOptions:
arrow- Arrow iconschevron- Chevron iconsarrows_large- Large arrow iconschevron_large- Large chevron iconsnone- No navigation icons
Background shape for navigation iconsOptions:
none- No backgroundcircle- Circular backgroundsquare- Square background
Section Layout
Section container widthOptions:
page-width- Constrained to page widthfull-width- Full viewport width
Gap between section elementsRange: 0-100px, step 1
Section color scheme
Padding
Top padding in pixelsRange: 0-100px, step 1
Bottom padding in pixelsRange: 0-100px, step 1
Static Blocks
1. Blog Title Block
Type:_featured-blog-posts-titleID:
static-blog-title
Displays the blog title or custom heading.
Default Content:
2. Blog Post Card Block
Type:_featured-blog-posts-cardID:
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
featured-blog-posts.liquid:1-33
Article Card Loop
featured-blog-posts.liquid:36-43
Blog Card Components
Article Title
Article Info (Author & Date)
Article Excerpt
Presets
The section includes 3 presets:1. Blog Posts Carousel
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
- 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
- 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
- Blog title (H3)
- Article cards with title, info, and excerpt
Resource List Rendering
featured-blog-posts.liquid:50-58
Liquid Variables
The section provides these variables to child blocks:closest.blog- The selected blog objectclosest.article- Current article in looparticle- Current article (also passed directly)
Available Article Properties
Styling
The section uses these CSS classes:Pagination Note
The section uses Shopify’s
{% paginate %} tag to load articles. The pagination limit is set to max_items (post_limit setting).Accessibility
Semantic HTML
Semantic HTML
- Article titles use proper heading hierarchy (H3 for section, H4 for articles)
- Article content wrapped in semantic elements
- Links are descriptive and contextual
Navigation
Navigation
Content
Content
- Article images include alt text
- Dates are machine-readable with proper formatting
- Author information is clearly associated with articles
Performance Tips
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
Featured Articles
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
Related Sections
Main Blog
Full blog page template
Blog Post
Individual article template
Carousel
General content carousel