The Feature with Image section is a fully customizable Shopify dynamic section designed for maximum flexibility and modern store layouts. It uses flexbox for responsive alignment and follows the BEM naming convention for clean, maintainable code. Perfect for highlighting key features alongside an image, this section is built to enhance conversions with clear messaging and strong visuals.
✨ Key Features
✅ Flexible Layout
-
Desktop: Left side shows 3 feature blocks, right side shows an image.
-
Mobile: Image moves on top, features display below.
✅ Customizable Content
-
Section heading, subheading, description, and button with font size & color control.
-
Each block includes icon, title, and description with individual font styling.
✅ Design Options
-
Background color/image picker.
-
Adjustable top/bottom padding & margin.
-
Choose between Full-width or Container layout.
✅ Modern Development Standards
-
BEM Naming Convention for maintainable, scalable CSS.
-
Lightweight Flexbox for perfect alignment.
-
Mobile-first responsive design built into the section.
⚙️ Customization Options
-
Section Settings:
-
Background color / image
-
Top & bottom padding / margin
-
Container or full-width layout
-
-
Typography Controls:
-
Heading: font size & color
-
Subheading: font size & color
-
Description: font size & color
-
Button: font size & color
-
-
Block Settings (per block):
-
Icon (image upload or SVG)
-
Title: font size & color
-
Description: font size & color
-
📂 Package Includes
-
feature-with-image.liquid
(section code) -
Fully commented code for easy editing
-
Installation guide (step-by-step)
💡 Ideal For
-
Landing pages with key feature highlights
-
Product detail pages with supporting visuals
-
Brand storytelling sections
🔧 Compatibility
-
Works with any Shopify theme (Online Store 2.0 compatible).
-
Drag & drop into your theme customizer.
👉 With this section, you can showcase features + visuals in a clean, professional layout—perfect for boosting engagement and conversions.