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

Steps:

1. In the theme editor (Customize), click Add section.

2. Locate Layered images with text section.

3. Make necessary changes.

4. Save.

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.

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

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.