# 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.

## Set up section

***

{% 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/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Set up hero image

***

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

<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](https://help.fluorescent.co/stiletto/general/image-guide/theme-image-settings#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>

## Change hero image styles

***

Apply color or gradient styles and 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. (*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.
5. Click **Save**.

</details>

## Add buttons

***

Add multiple **Button** blocks to link to your collections or products or any other page with a custom label.

<details>

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

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

1. Click on a **Button** block to open the settings.

   > Click **(+) Add block** and select **Button** to add more.

   > Click **Remove block** or the eye icon to remove or hide blocks.
2. Select or paste a URL for the **Button link**.
3. Enter text for the **Button label**.

   > 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)
4. (*Optional*.) Use the drag and drop handles **`⋮⋮`** to change the position of the **Button**:

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)
5. Select a **Button style**: either **Solid**, **Outline**, or **Text**.

   > Click on the **Image hero** section to find the color options for buttons.
6. Click **Save**.

</details>

## Section style

***

Fine-tune the colors, text position, and padding of the section.

<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. Change the **Text position** to align all text content to the **Left**, **Middle**, or **Right** of the section.
3. Select a **Padding** option to add space around the section to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
4. Click **Save**.

</details>

## Settings reference

Click the **Image blocks** to find the following settings.

#### Image blocks

<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="../../../general/image-guide/theme-image-settings#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="../../../general/image-guide/theme-image-settings#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>

Click the **Image hero split** section to find the following settings.

#### Layout

<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><tr><td>Text position</td><td>Align all text content to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> of the section.</td></tr></tbody></table>

#### Color

<table><thead><tr><th width="172">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Enter multiple lines of text.</td></tr><tr><td>Button</td><td>Select the color of the button background.</td></tr><tr><td>Solid button text</td><td>If the <strong>Solid</strong> button style is selected in the button block settings, select the color for the button text.</td></tr><tr><td>Overlay</td><td>Select a color to overlay the image. This option helps provide contrast with text and headings to keep them clear and readable.</td></tr><tr><td>Overlay gradient</td><td>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 <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td></tr><tr><td>Overlay opacity</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>

#### Section style

<table><thead><tr><th width="154">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable animation</td><td>Choose whether to display visual effects when scrolling, hovering, or interacting with the section.<br><br>See the <a href="../../theme-styles/animation">Animation guide</a> to learn more.</td></tr><tr><td>Padding</td><td>Add a margin of space around the section to either the <strong>Top and bottom</strong>, <strong>Top only</strong>, <strong>Bottom only</strong>, or set it to <strong>None</strong>.</td></tr></tbody></table>

\\

***

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