# Image with features
Use the **Image with text** section to highlight up to six key features of your products with custom text and icon-like images next to a full-height image.
## Set up section
Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Select a **Template** to edit from the dropdown menu in the top bar.
> Learn how to use templates in our [Templates guide](https://help.fluorescent.co/spark/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Image with features**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
## Add feature image
You can showcase a large image to the left or right of the features and adjust its width and crop it to be a different shape.
STEPS
In your theme editor (**Customize**):
1. Click the **Image with text** section to open the section settings.
2. Click **Select image** to upload and select an image file.
> There are no required images dimensions. We simply recommend uploaded images have a minimum width of **`2500px`** for optimal quality across all devices.
3. Choose to set the **Image width** to either *1/2* or *2/3* of the section.
4. Select an **Image aspect ratio** to crop your image to **Square**, **Landscape**, or **Portrait**.
> The **Natural** setting displays the original shape of your image.
5. Click **Save**.
## Add feature blocks
You can add up to 6 Feature blocks with headings, subheadings, and a square or circle icon-like image to accompany or illustrate the individual feature.
STEPS
In your theme editor (**Customize**):
1. Click **(+) Add Feature** and/or click on the Feature block you wish to edit.
2. Under *Image*, click the **Select image** button to add a small image to display next to the feature content.
> We recommend a square image, ideally 160px by 160px.
3. Change the **Image shape** of the feature image to either *Round* or *Square*.
4. Change the **Heading** text.
> We recommended a short title of just a few words.
5. Change the **Subheading** text.
> We recommend two to three short sentences.
> We also recommend trying to keep the subheading text for all Feature blocks around the same length.
6. Use the **Max width of text** slider to control the maximum width of the article subheading.
> Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
7. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:
> Click **Remove block** in the block settings to delete a block.
> Click the **Eye icon** to hide or unhide a block.
8. Click **Save**.
## Section layout
You can adjust the layout of the section by changing the **Position** and **Alignment** of the features.
STEPS
In your theme editor (**Customize**):
1. Change the **Text position** to display the features to the *Left* or *Right* of the section image.
2. Change the **Text alignment** to make the feature paragraphs *Left*, *Center*, or *Right* aligned.
3. Click **Save**.
## Section style
Customize the section **Style** with options for section **Spacing**, **Animation**, and **Alternate section color**.
STEPS
In your theme editor (**Customize**):
1. Click on the section to find the **Section style** settings.
2. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.
> Learn more about [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) in Spark.
3. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
4. Select a **Spacing** option to add padding around the section content.
> Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
5. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
6. Click **Save**.
## Settings reference
Click the **Feature blocks** to find the following settings.
#### **Block content**
| Setting | Description |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Image | Select or upload an image to accompany or illustrate the individual feature. We recommend a square image, ideally 160px by 160px. |
| Image shape | Choose to display the Feature block image as Round or Square. |
| Heading | Add text for the feature block heading. We recommend using a short title. |
| Subheading | Add text to show a subheading below the main heading. |
| Max width of text | Use the slider to control the maximum width and line breaks of the headings. |
Click the **Image with features** section to find the following settings.
#### **Section content**
| Setting | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Image | Use the Select image button to add a section image.
There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall). We recommend uploading an image with a minimum width of 2500px for optimal quality.
|
| Image width | Choose an image width of either 1/2 or 2/3 to set the image size to half or over half of the section. |
| Image aspect ratio | Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2).
Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide.
|
| Text position | Change the Text position to display the features to the Left or Right of the section image. |
| Text alignment | Choose to align the section content to either the Left, Center, or Right. |
#### Section style
| Setting | Description |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) to learn more. |
| Use alternate section color | Apply the alternate section colors as chosen in your Theme Settings. See Spark's [theme color settings](https://help.fluorescent.co/spark/theme-styles/colors) to learn how to create a secondary color scheme with alternate section colors. |
| Spacing | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None. |
| Spacing amount | Increase or decrease the amount of space around the section: either Full, Half, or Minimum. |
***
> **Related links**
>
> [Image with text](https://help.fluorescent.co/spark/pages/theme-sections/image-with-text)\
> [Text columns with images](https://help.fluorescent.co/spark/pages/theme-sections/text-columns-with-images)