Image With Blocks

The Image With Blocks section creates a versatile two-column layout that pairs a single image on one side with your content blocks on the other, making it perfect for story pages, about sections, product explanations, or any spot where you want to combine a compelling visual with rich, customizable content. You have full control over the column ratio (from 80/20 to 20/80) to give more or less space to either the image or your content, plus you can control the content order on desktop (left/right) and mobile (top/bottom) to ensure your layout looks perfect at every breakpoint. The image can be displayed with customizable border radius for that polished look, and the content side can contain any combination of blocks—headings, descriptions, buttons, icons, groups, or any other blocks you want to add—giving you complete creative freedom to tell your story exactly how you want. You can also align items vertically (top, center, or bottom) on desktop to fine-tune the visual balance, and the section is fully customizable through the Shopify Theme Customizer—adjust spacing, padding, backgrounds, colors, borders, and more without touching a line of code, making it easy to create professional-looking content sections that work beautifully on any Shopify 2.0 theme like Dawn or Horizon, whether you're building story pages, about sections, or any content area where you want to pair a single powerful image with explanatory text and call-to-action buttons.

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 "Image With Blocks" 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 "Image With Blocks" from the available sections.

4

Set Section Width

In the section settings, choose your preferred layout:

  • Full width: Spans the entire page width

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

  • Theme width: Use your theme's default container width

5

Add Content

Click "Add block" to add a layout block with an image and content blocks. You can add an image on one side and any combination of content blocks (headings, descriptions, buttons, icons, groups, etc.) on the other side.

6

Customize & Style

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

  • Adjust background colors or add background images

  • Control spacing and padding

  • Customize column ratios and content order (left/right on desktop, top/bottom on mobile)

  • Set image border radius and item alignment

  • Customize typography and colors

circle-info

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