> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero-split.md).

# Image hero split

The **Image hero split** section provides a highly-customizable feature for your boldest product imagery with two side-by-side hero images. Create a unique section with promotional content, multiple buttons, and comprehensive image settings.

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Image hero split**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Set up hero images</h2>

***

Upload two **Images** and fine-tune their **Height** and **Focal point**. Add a **Mobile-specific image** for the best results on smaller screens.

### <mark style="color:$primary;">Add image blocks</mark>

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on an **Image hero split** block to open the 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. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](/stiletto/general/image-guide/theme-image-settings.md#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
5. Enter text for the **Heading** as a title overlayed on top of the image block.
6. Enter **Text** for a subheading beneath the heading to say more. We recommend a short sentence or two.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
7. Select or paste a URL for the **Button link**.
8. Enter text for the **Button label**. If left blank, the entire image will be a clickable link.

   > 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)
9. Select a **Button style**: either **Solid**, **Outline**, or **Text**.

   > Click on the **Image hero split** section to find the color options for buttons.
10. Repeat steps 1 - 6 for the second hero image block.
11. Click **Save**.

</details>

<sub><mark style="color:$info;">Click image block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="167">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td><p>Select an image to display as the hero image.</p><p>There are no required image dimensions. We recommend a minimum width or height of 2500px.</p></td></tr><tr><td>Mobile image</td><td><p>Select an image to display as an hero image for mobile screens.</p><p>There are no required image dimensions. We recommend a minimum width or height of 2500px.</p></td></tr><tr><td>Image focal point</td><td>Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns#image-focal-point">Image settings guide</a>.</td></tr><tr><td>Mobile image focal point</td><td>Select the most important part of your mobile image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns#image-focal-point">Image settings guide</a>.</td></tr><tr><td>Heading</td><td>Add text to show a main heading.</td></tr><tr><td>Text</td><td>Add text to show below the main heading.</td></tr><tr><td>Button link</td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td>Button label</td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td>Button style</td><td>Choose a style for the button. Select <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

### <mark style="color:$primary;">Image height</mark>

Adjust the height of both hero images.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Image hero split** section to open the settings.
2. Under **Image height**, choose to display the image with a **Custom** or the **Original** height (without cropping).
3. If **Custom** height is selected: adjust the **Height** and **Mobile Height** of your images between 50% to 100% of the maximum height.

   > The **Height** is the percentage of the window height on your customer's device.

   > When **Custom height** is set to 50%, the image will always
4. Click **Save**.

</details>

<table><thead><tr><th width="156">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image height</td><td>Display the image with a <strong>Custom</strong> or the <strong>Original</strong> height (without cropping). If <strong>Custom</strong> height is selected: adjust the <strong>Height</strong> and <strong>Mobile Height</strong> of your image between 50% to 100% of the maximum height.</td></tr></tbody></table>

### <mark style="color:$primary;">Background image overlay</mark>

The **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="163">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select a color scheme to apply background and text color. This option helps provide contrast with text and headings to keep them clear and readable.</td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.</td></tr></tbody></table>

***

> **Related links**
>
> [Image hero](/stiletto/sections/theme-sections/image-hero.md)\
> [Image with text](/stiletto/sections/theme-sections/image-with-text.md)\
> [Image with text split](/stiletto/sections/theme-sections/image-with-text-split.md)\
> [Slideshow](/stiletto/sections/theme-sections/slideshow.md)\
> [Video hero](/stiletto/sections/theme-sections/video-hero.md)