Article Hero

The Blog Article Hero section creates a striking header for blog article pages with a two-column layout that pairs the article's featured image alongside key metadata. Select an article and the section automatically pulls in its featured image, title, published date, and excerpt—displayed in a responsive side-by-side grid on desktop that stacks cleanly on mobile. The Article hero layout block lets you control column ratios (from 80/20 to 20/80), image position on desktop and mobile, vertical alignment, and image border radius. Add or reorder Article title, Article date, and Article excerpt blocks—or drop in any theme or app block for extra content. Control section width (fixed, full, or theme-native containers for Dawn, Horizon, or custom themes), background colors or images with overlay, spacing, typography, and scroll animations—all without code, directly in the Shopify Theme Editor. It works with any Shopify 2.0 theme and is ideal for replacing default article headers with a branded, editorial hero that sets the tone before the main article content.

Setup Instructions

1

Install the App

Visit the Shopify App Store and install Flexi Slider Sections. Start your free trial to access all features and sections.

2

Install Section

Open the Flexi app and navigate to the sections library. Search for "Blog Article Hero" and click "Add to Theme" to install it instantly.

3

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Open your article template, click "Add section", and select "Blog Article Hero" from the available sections.

4

Set Section Width

In the section settings, choose your preferred layout:

• Fixed: Set a custom maximum width (320px - 1440px)

• Full: Spans the entire page width

• Custom Theme: Use your theme's page width class (e.g. section on Horizon)

• Dawn Theme / Horizon Theme: Match those theme container widths

5

Add Content

In the section settings, select the Article you want to display. Inside the Article hero layout block, add or configure blocks:

• Article title: Displays the article heading

• Article date: Shows the published date

• Article excerpt: Pulls in the article summary with a customizable character limit

The layout automatically displays the article's featured image in the opposite column.

6

Customize & Style

Fine-tune the section with the built-in settings:

• Adjust background colors or add background images with overlay opacity

• Control section and block spacing and padding

• Set column ratio and image position on desktop and mobile

• Customize font colors and sizes for the title, date, and excerpt

• Adjust image border radius, alignment, and scroll animations

Why Use Flexi Sections?

Designed to Feel Native Flexi sections are built to inherit your theme’s structure and styles, so they blend in naturally instead of feeling bolted on. Spend less time overriding CSS and more time shipping polished layouts that feel intentional.

Prebuilt, Not Prescriptive Each section provides a production-ready foundation without locking you into rigid layouts. Configure content, spacing, and structure to match your client’s needs—without rebuilding the same patterns from scratch.

Theme-First Customization All styling and layout adjustments happen through the Shopify Theme Editor. Tweak typography, spacing, alignment, and behavior using familiar theme controls, just like native sections.

Built for Performance & SEO Flexi sections are optimized for real storefronts, not demos. Lightweight markup and thoughtful defaults help keep pages fast, stable, and search-friendly across devices.

Works Across Any Shopify Theme Flexi sections work with any Shopify 2.0 theme, including Dawn, Horizon, and custom builds. Test safely on duplicate themes and ship with confidence.

Easy to Maintain Over Time Once a section is in place, it’s easy to manage. Update content, swap images, or adjust layout directly in the Shopify admin—no fragile custom code or one-off fixes to maintain later.

Built for Reuse Across Projects Flexi is designed for builders shipping real work. Reuse the same section patterns across client projects to stay consistent, move faster, and avoid unnecessary technical debt.