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:
In the theme editor (Customize), click Add section.
Locate Layered images with text section.
Make necessary changes.
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.
Last updated