Icon with Text Block

What This Block Does

Icon with Text blocks combine visual icons with headlines and descriptive text to communicate features, benefits, or services in an easy-to-scan format. The icons help customers quickly identify and understand different points while the text provides details.

Perfect for: Product features, service benefits, company values, process steps, contact information, trust indicators

How to Add It

Step 1: Add the Icon with Text Block

1. In your Shopify admin, go to Online Store → Themes
2. Click Customize next to your live theme
3. Navigate to any section that supports blocks
4. Click Add block and choose Icon with Text Block from the list

Step 2: Configure Your Content

1. Choose your icon (built-in icon or upload custom image)
2. Add a descriptive headline
3. Write supporting text that explains the benefit or feature
4. Set the icon placement and alignment

Key Settings to Configure

Icon Selection

Icon Source: Choose between built-in icons or custom images

• Built-in Icons: Use theme icons like stars, checkmarks, shipping symbols
• Custom Images: Upload your own icons for brand-specific imagery
• Pro tip: Built-in icons automatically match your theme colors and load faster

Icon Placement: Control where the icon appears relative to text

• Top: Icon above heading (classic feature layout)
• Inline with Heading: Icon next to the headline (compact layout)
• Start of All: Icon to the left of all content (horizontal layout)

Content

Heading: The main title that describes the feature or benefit

• Keep it clear: "Free Shipping" is better than "Logistics Solutions"
• Focus on benefits: What does this mean for the customer?

Text: Supporting details that explain the heading

• Be specific: Include relevant details like timeframes, limitations, or qualifications
• Keep it scannable: 1-2 sentences work best for most features

Visual Styling

Icon Size: Choose how prominent the icon appears

• Small: Subtle icons that support the text
• Normal: Balanced visual weight (most common)
• Large: Prominent icons for hero sections or key features

Pro Tips for Success

Feature Presentation Best Practices

• Lead with benefits: Focus on what customers gain, not just features
• Use consistent icons: Similar style and size icons create a professional look
• Group related items: Use multiple Icon with Text blocks together for feature lists
• Choose meaningful icons: Icons should relate clearly to the content they represent

Common Mistakes

• Generic icons: Using irrelevant icons confuses rather than helps customers
• Too much text: Long paragraphs defeat the purpose of quick, scannable content
• Inconsistent sizing: Mixing different icon sizes in the same section looks messy
• Weak headlines: Vague titles like "Great Service" don't tell customers anything specific