Banner with Icons

What This Section Does

Display a large banner image with your main message, plus a row of icons below that highlight your key features or benefits. This combination creates visual impact while providing specific reasons why customers should choose your products.

Perfect for:

• Homepage sections explaining what makes you special
• Product category pages highlighting key benefits
• Service pages showing your competitive advantages
• About pages showcasing your brand values

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 your main content area
4. Choose Banner with Icons from the list

Step 2: Set Up Your Banner

1. Upload your main banner image
2. Add your headline and description text
3. Position the text where it's most readable
4. Add a call-to-action button if needed

Step 3: Add Your Feature Icons

1. Click Add icon block for each feature you want to highlight
2. Choose relevant icons from the library or upload your own
3. Add short, clear descriptions for each feature
4. Arrange them in order of importance

Key Settings to Configure

Banner Content

Your main message: Make it clear and compelling

• Headline focus: Keep it under 8 words and benefit-focused
• Description support: Add 1-2 sentences that explain the benefit in more detail
• Image choice: Use high-quality images that support your message
• Pro tip: Make sure text is readable by choosing images with clear areas for text overlay

Icon Selection

Feature highlights: Choose 3-5 key benefits to feature

• Most important first: Arrange icons by what matters most to customers
• Keep it simple: Each icon should represent one clear benefit
• Consistent style: Use icons that look good together as a set
• Real benefits: Focus on actual advantages customers care about (free shipping, quality materials, etc.)

Layout Options

How content appears: Optimize for both desktop and mobile viewing

• Text positioning: Choose overlay or below-image based on your image
• Icon arrangement: Slider format works well when you have 4+ features
• Mobile considerations: Ensure text and icons are easily readable on small screens

Pro Tips for Success

Best Practices

• Use icons that immediately communicate the benefit (truck for fast shipping, shield for security)
• Keep icon descriptions to 2-3 words maximum for quick scanning
• Choose a banner image that relates to your product or brand story
• Test different text positions to ensure readability across devices
• Update icons seasonally or when you add new features

Common Mistakes

• Using too many icons that overwhelm the message
• Choosing generic icons that don't clearly represent benefits
• Making banner text too long for quick reading
• Using low-quality or pixelated images
• Forgetting to add alt text for accessibility