# 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 {% hint style="success" %} Steps: 1. In the theme editor **(Customize)**, click **Add section.** 2. Locate **Image with feature** section. 3. Make necessary changes. 4. **Save.** {% endhint %} ## How to customize an Image with feature section {% hint style="info" %} 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 {% endhint %} ### Section settings #### General settings * **Color scheme**: Choose a preset color scheme for background/text. *Lean more:* [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention") * **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. :writing\_hand: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention") * **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.* {% hint style="success" %} #### 📱 Mobile responsiveness * Image stacks on top with features below. * Use separate mobile image if necessary for better clarity. {% endhint %}