For the complete documentation index, see llms.txt. This page is also available as Markdown.

Split Images

The Split Images section creates a full-width slideshow where each slide features two side-by-side (or stacked) background images with overlaid content—a bold, editorial layout ideal for homepage heroes, lookbooks, or campaign banners that need visual contrast. Add Split images slide blocks inside the Split images layout, each with two images you can split left/right or top/bottom, plus an optional color overlay, subheading, heading, description, and call-to-action button. Position content anywhere on the slide (nine alignment options), control text alignment and color, and set custom or hug slide heights with separate desktop and mobile minimums. The slideshow cycles through slides one at a time with dot pagination, navigation arrows (middle overlay or bottom-right), autoplay with custom timing, loop, and touch dragging. Control section width (fixed, full, or theme-native containers for Dawn, Horizon, or custom themes), section background colors or images with overlay, spacing, and scroll animations—all without code, directly in the Shopify Theme Editor. It works with any Shopify 2.0 theme and is perfect for dual-image storytelling, before-and-after showcases, or multi-campaign homepage rotations.

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 "Split Images" and click "Add to Theme" to install it instantly.

3

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Click "Add section" and select "Split Images" 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

Inside the Split images layout block, click "Add block" to add Split images slide blocks. For each slide, upload a First image and Second image, choose a split direction (left/right or top/bottom), and add your subheading, heading, description, and button. Add as many slides as you need—the slideshow cycles through them one at a time.

6

Customize & Style

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

  • Adjust section background colors or background images with overlay opacity

  • Control section spacing and slide min heights (desktop and mobile)

  • Set image overlay, content position, text alignment, and button style on each slide

  • Configure dot pagination color, arrow position, autoplay, loop, and drag behavior

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.

Last updated