# Layered images with text 🔥
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 style="success" %}
Steps:
1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Layered images with text** section.
3. Make necessary changes.
4. **Save.**
{% endhint %}
## How to edit a Layered images with text section
### Section settings
#### Section header
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.
:sparkles:[add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **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.
### Block settings
You can add multiple images to the section.
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.
***
---
# 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://docs.foxecom.com/hyper-theme/theme-sections/layered-images-with-text.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.
.jpg?alt=media&token=e1f8ab94-4ecc-4400-9828-6e9fde46d1db)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)