Image with feature 🔥

The Image with feature section allows you to showcase a product, promotion, or story using a prominent image alongside a list of highlighted features or benefits. It's ideal for product spotlights or explaining a hero item with key selling points.

How to add an Image with feature section to your Shopify store

Steps:

1. In the theme editor (Customize), click Add section.

2. Locate Image with feature section.

3. Make necessary changes.

4. Save.

How to customize an Image with feature section

This section contains:

• One main image on the left

• Up to 4 feature columns on the right, each with:

  • An icon

  • A heading

  • A brief supporting description

Section settings

General settings

• Color scheme: Choose a preset color scheme for background/text. Lean more: Colors

• Image ratio: Pick Square, Portrait, Landscape, or Adapt to Image to control how your image displays.

Image settings

• Desktop image: Upload the main image to display on desktop.

• Mobile image (optional): Upload a different image optimized for mobile if needed.

• Enable sticky on desktop: Makes the image stay visible as users scroll through content on the right.

Section header

See settings

• Text alignment: Align the text in the section to the Left, Center, or Right.

• Text alignment on Mobile: Override desktop alignment settings specifically for mobile devices if needed.

• Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.

• Heading: Enter the primary title for your banner.

• Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

  ✍️ Add Highlighted text to your Headings

• Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.

• Text size: Select the size of the description text.

Block settings

Each block represents one feature with the following options:

• Icon/Image: Choose from the theme’s built-in icon list or upload an image as custom icon.

• Heading: Feature title.

• Text: Supporting description.

• Maximum width: Adjust the width of the column to control spacing.

• Font and text settings: Customize heading size, font family, and highlight styles.

📝 Tip: Keep feature text short and benefit-focused. Use icons that visually support the feature name.

📱 Mobile responsiveness

• Image stacks on top with features below.

• Use separate mobile image if necessary for better clarity.