Appearance

Media with Features Section ​

What This Section Does ​

The Media with Features Section creates compelling product or service showcases with a central media element (image or video) flanked by key features or benefits. This balanced three-column layout draws attention to your main visual while highlighting important selling points on both sides.

Perfect for: Product feature highlights, service benefits showcase, brand story presentation, key differentiators display, before/after comparisons with benefits

How to Add It ​

Step 1: Add the Section

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Click Add section in the main content area
  4. Choose Media with Features from the list

Step 2: Configure Your Layout

  1. The section comes with sample features and a placeholder media block
  2. Add your central image or video using the Media Block
  3. Customize the left and right feature lists using theme blocks
  4. Adjust spacing and overall styling to match your design

Key Settings to Configure ​

Layout Controls ​

Gap Size: Control spacing between the three columns

  • Small gaps (2-4): Tight, cohesive layouts where elements feel connected
  • Medium gaps (6-8): Balanced spacing that's readable but unified
  • Large gaps (10-12): Spacious layouts with distinct column separation
  • Pro tip: Larger gaps work better for complex content, smaller gaps for simple features

Page Width: Choose how wide your content appears

  • Regular: Standard content width for most use cases
  • Narrow: Focused, intimate presentation for premium products
  • Full: Edge-to-edge layouts for maximum visual impact

Visual Design ​

Color Scheme: Choose from your theme's color schemes

  • When to use: Match your page's overall design or create contrast for emphasis
  • Best practice: Consider the background color when selecting media and text contrast

Content Structure ​

The section uses three specific block types that work together:

Features Container Blocks (Left & Right): Hold your feature lists

  • Accept any theme blocks for maximum flexibility
  • Commonly use Icon with Text blocks for feature highlights
  • Support vertical alignment settings for balanced layouts

Media Block (Center): Displays your primary visual content

  • Supports images, videos, or other media content
  • Automatically maintains square aspect ratio for consistency
  • Creates the focal point of your three-column layout

Content Block Integration ​

This section works with the complete theme blocks system for the feature columns:

Icon with Text Blocks:

  • Perfect for feature lists with visual icons
  • Clear hierarchy with headings and descriptions
  • Consistent spacing and alignment

Text Blocks:

  • Simple bullet-point style features
  • Detailed benefit descriptions
  • Testimonial quotes or endorsements

Button Blocks:

  • Call-to-action elements for each feature
  • "Learn More" links for detailed information
  • Direct purchase or contact buttons

Content Organization Strategies ​

Product Features:

  • Left Column: Technical specifications or quality features
  • Center: Product hero image or demonstration video
  • Right Column: User benefits or lifestyle features

Service Benefits:

  • Left Column: Process advantages (speed, efficiency)
  • Center: Service in action or results imagery
  • Right Column: Customer benefits (satisfaction, peace of mind)

Brand Story:

  • Left Column: Company values or history highlights
  • Center: Brand imagery or founder photo
  • Right Column: Customer promises or guarantees

Pro Tips for Success ​

Content Balance Best Practices

  • Keep features concise: 2-4 features per side works best for scannability
  • Balance left and right: Aim for similar content length on both sides
  • Choose compelling media: The center image/video should be your strongest visual
  • Maintain consistency: Use similar block types and formatting on both sides
  • Test mobile layout: The three columns stack vertically on mobile devices

Common Mistakes

  • Overwhelming feature lists: Too many features on each side creates visual clutter
  • Unbalanced content: One side significantly longer than the other looks awkward
  • Poor media choice: Weak central media undermines the entire section's impact
  • Inconsistent formatting: Different block styles on each side feels unprofessional
  • Ignoring mobile: Always preview how the stacked mobile layout reads

Mobile Behavior ​

The three-column layout automatically adapts for mobile devices:

  • Stacking Order: Left features → Media → Right features
  • Full Width: Each section takes the full mobile screen width
  • Maintained Spacing: Gap settings scale appropriately for smaller screens
  • Touch Optimization: All interactive elements remain easily tappable

Common Use Cases ​

Product Showcase ​

  • Left: Quality & craftsmanship features
  • Center: Product hero shot or 360° view
  • Right: User benefits & lifestyle advantages

Service Presentation ​

  • Left: Process efficiency features
  • Center: Service demonstration or results
  • Right: Customer satisfaction benefits

Technology Features ​

  • Left: Technical capabilities
  • Center: Product in use or interface demo
  • Right: User experience benefits

Brand Values ​

  • Left: Company mission & values
  • Center: Brand imagery or team photo
  • Right: Customer promises & guarantees