Heading with Images

What This Section Does

Create engaging headlines by embedding small images directly within your text content. These images have interactive hover effects that make your headings more dynamic and help illustrate your key points visually while maintaining focus on your message.

Perfect for:

• Hero section headlines that showcase multiple products
• Feature announcements with visual product highlights
• Brand story sections showing key products or team members
• Service descriptions with illustrative icons or examples

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 Heading with Images from the list

Step 2: Create Your Headline

1. Write your headline text in the main text field
2. Use placeholders like [img1], [img2], [img3] where you want images to appear
3. Example: "Discover our [img1] premium coffee, [img2] artisan pastries, and [img3] cozy atmosphere"
4. Add image blocks and upload the corresponding images

Key Settings to Configure

Content Strategy

Text with visual elements: Balance readability with visual interest

• Natural integration: Place image placeholders where they enhance rather than interrupt the message
• Clear message: Ensure your headline still makes sense and reads naturally
• Visual support: Use images that illustrate or reinforce your text content
• Pro tip: Start with your headline text, then identify the best places to add visual elements

Image Selection

Choosing the right visuals: Pick images that enhance your message

• Product highlights: Use high-quality product photos that customers will recognize
• Consistent style: Keep all embedded images similar in style, lighting, and quality
• Appropriate sizing: Choose image sizes that complement rather than overpower your text
• Best practice: 2-4 embedded images usually work best - more becomes distracting

Visual Design

Making it look professional: Ensure cohesive, attractive presentation

• Size consistency: Use the same size for all embedded images within one headline
• Hover effects: Images automatically scale and lift on hover to add interactivity
• Mobile optimization: Images automatically resize appropriately for smaller screens
• Text flow: Ensure images don't break up text in awkward ways on mobile

Pro Tips for Success

Best Practices

• Write your headline first, then identify natural places to add images
• Use high-quality product photos or professional images that align with your brand
• Keep embedded images smaller than main hero images to maintain text focus
• Test how your headline looks on mobile to ensure images don't disrupt readability
• Choose images that genuinely relate to and enhance your text message

Common Mistakes

• Adding too many images that make the headline hard to read
• Using poor quality or inconsistent images that look unprofessional
• Placing images in awkward spots that break up natural reading flow
• Making embedded images too large and overwhelming the text
• Using images that don't actually relate to the headline content