# 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](/lorenza/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [use metafields and dynamic sources](/lorenza/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% 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](/lorenza/general/editing-themes/using-templates.md).
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](/lorenza/sections/theme-sections/image-with-text.md)\
> [Image with text split](/lorenza/sections/theme-sections/image-with-text-split.md)\
> [Slideshow](/lorenza/sections/theme-sections/slideshow.md)\
> [Video hero](/lorenza/sections/theme-sections/video-hero.md)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.fluorescent.co/lorenza/sections/theme-sections/image-hero.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.