Appearance

Media with Icons Section ​

What This Section Does ​

The Media with Icons Section creates a two-column layout that combines visual media with icon-enhanced content. The icons help break up text and make features easier to scan, while the media provides visual support for your message.

Perfect for: Product feature highlights, service benefits, process explanations, company values, educational content

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 Icons from the list

Step 2: Configure Your Content

  1. The section comes with sample content and media blocks
  2. Add your images or videos to the media container
  3. Customize the icon features using theme blocks
  4. Update the section heading and layout settings

Key Settings to Configure ​

Section Header ​

Heading: Main title for your section

  • When to use: Clear titles like "Why Choose Us" or "How It Works"

Subheading: Additional context or details

  • Best practice: Briefly explain what the features below demonstrate

Text Alignment: Control header positioning

  • Center: Balanced, professional look
  • Left: Traditional layout
  • Right: Unique design choice

Content Layout ​

The section automatically creates a two-column layout:

  • Content side: Icon features, headings, and text
  • Media side: Images, videos, or image grids
  • Mobile: Stacks vertically with media first

Block Integration ​

This section uses theme blocks for flexible content:

Icon with Text Blocks: Create feature lists with visual icons Heading Blocks: Add section titles and organization Text Blocks: Include detailed descriptions Button Blocks: Add calls-to-action

The media container supports single images, videos, or multiple media items in a grid layout.

Pro Tips for Success ​

Content Best Practices

  • Keep it simple: 3-5 icon features work best
  • Choose clear icons: Icons should obviously relate to their content
  • Balance both sides: Similar content length looks more professional
  • Use quality media: High-resolution images enhance credibility

Common Mistakes

  • Too many features: More than 6 icons becomes overwhelming
  • Unrelated icons: Icons should clearly match their content
  • Poor image quality: Blurry or low-res images hurt your brand