# Image hero
The **Image hero** section lets you feature your boldest product and store photography with overlay headings.
## **S**et 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/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [use metafields and dynamic sources](https://help.fluorescent.co/lorenza/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/lorenza/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Image hero**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
## **Set up image**
Upload an **Image** and fine-tune it by adjusting the **Height** and **Focal point**. Add a a **Mobile-specific image** so this section looks best on all devices.
STEPS
In your theme editor (**Customize**):
1. Click on the **Image hero** 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 **`2050px`** for optimal quality across all devices.
3. (*Optional*.) Upload a **Mobile image** to display only on mobile devices.
> You may want a different image that works best with mobile screen dimensions, for example a portrait shaped image.
4. Under **Image height**, choose to display the image with a **Custom** or the **Original** height (without cropping).
5. If **Custom** height is selected: adjust the **Height** and **Mobile Height** of your slide images between 50% to 100% of the maximum height.
> The **Height** is the percentage of the screen or window height.
> When **Custom height** is set to 50%, the image will always display at half the height of the customer's screen or window height.
6. Select the **Image focal point** to choose which section of the image to keep centered within the slide.
> This setting ensures the key part of your image appears when cropping occurs.
7. Click **Save**.
## **Section content and style**
Add a section title and promotional text to overlay your **Image hero**. The section headings are included as blocks nested within the section.
STEPS
In your theme editor (**Customize**):
1. Click the **Heading** block to change section title.
> We recommended a short title of just a few words.
2. Click the **Subheading** block to add a few sentences below the heading.
> We recommend two or three short sentences.
3. Use the **Max width of text** slider to control the maximum width of the headings.
> Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
4. Use the **Show/hide** button (eye icon) to remove a heading block.
5. Click on the **Image hero** section to change the **Text container color** and **Text color**.
> We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
6. (*Optional*.) Select an **Overlay color** to display overtop of the image and adjust the **Overlay opacity** using the slider.
> The **Overlay** lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.
> Set the opacity to *0%* to turn off the overlay color; set it to *100%* to create a solid color block with no image.
7. (*Optional*.) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.
> You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
8. Click **Save**.
## Add call-to-action button
Add a **Button** block to link to your collections or products or any other page with a custom label.
STEPS
In your theme editor (**Customize**):
1. Click **(+) Add block** and select **Button**.
2. Click on the new **Button** block to open the settings panel.
3. Select or paste a URL for the **Link**.
4. Change the **Link text** to display on the button.
> The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
5. (*Optional*.) Use the drag and drop handles **`⋮⋮`** to change the position of the **Button**:
6. Click **Save**.
## Settings reference
Click on the section to find the following settings:
| Setting | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image | Select or upload an image. |
| Image Height | Set the image height to Custom or Original.
Select Original to display your uploaded image without cropping.
|
| Heading | Enter heading text to display as a title on the image. |
| Subheading text | Enter subheading text to display below the heading. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor manual](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor). |
| Max width of text | Use the slider to control the maximum width and line breaks of the headings. |
| Link | Choose a page from your store to be link to from the section's call to action button. |
| Link text | Add text to be used on the call to action button. |
| Text alignment | Select the position of the headings using the dropdown. |
\\
***
> **Related links**\
> [Image with text](https://help.fluorescent.co/lorenza/sections/theme-sections/image-with-text)\
> [Image with text split](https://help.fluorescent.co/lorenza/sections/theme-sections/image-with-text-split)\
> [Slideshow](https://help.fluorescent.co/lorenza/sections/theme-sections/slideshow)\
> [Video hero](https://help.fluorescent.co/lorenza/sections/theme-sections/video-hero)