# Layered images with text 🔥

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(31)_aNtIaibL.jpg)

The **Layered Images with Text** section includes images overlaid with each other, surrounding the centrally-placed text/ information.

This design can form a visually appealing and dynamic layout for your Shopify store.

## How to add a Layered images with text section to your Shopify store

<Hint type="success">

Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Layered images with text** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Layered images with text section

### Section settings

#### Section header

![image](https://docs-assets.foxecom.app/hyper-theme/image_9cj45KUe.png)

<Expandable title="See settings">

* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.
* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Subheading style**: Only show the text, or add a border around the subheading. The subheading border will have a fixed border radius of 24px by default.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

✨[Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.

</Expandable>

### Block settings

You can add multiple images to the section.&#x20;

![image](https://docs-assets.foxecom.app/hyper-theme/image_RfGpOaYn.png)

Each image block within the section include configurable options:

* **Image upload**: Upload or select an image to showcase. This is the main visual element that will be layered within the section.
* **Image width**: Control the width of the image in pixels to fit your design preferences.
* **Vertical position**: Move the image up or down relative to the container.
* **Horizontal position**: Move the image left or right within the container.
* **Mobile image**: Upload an alternative image to be displayed on mobile devices for optimal responsiveness and layout control.
* **Animations**: Add dynamic effects to your image.
  * **None**: The image remains static and does not animate.
  * **Move up down**: The image will move vertically up and down, creating a subtle and engaging animation effect.
  * **Move up down reverse**: This effect reverses the vertical movement, making the image move up and down in a contrasting direction for a unique animation style.