Multipurpose theme documentation
Multipurpose Fashion Theme
Advanced Image With Text
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Image & Media Sections > Advanced Image with Text
Overview
The Advanced image with text section displays two images with text content. Supports overlapping image layouts, shapes (rounded, circle, arch, blob), and flexible positioning. Use it for creative storytelling, product showcases, or brand content. No blocks; all content in section settings.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or desired template.
- Click Add section.
- Choose Advanced image with text.
- Save.
Image placeholder: Add a screenshot of Advanced image with text section.
Quick Setup (4 Steps)
- Add images: Upload Image 1 and Image 2.
- Add content: Subheading, heading, text, button.
- Set layout: Image position (left/right), image shapes.
- Style: Image size, border radius, shadow, hover zoom.
Section Settings
Content
| Setting | Description |
|---|---|
| Section aria label | Accessible label for screen readers. Defaults to heading if blank. |
| Subheading | Small text |
| Heading | Main headline |
| Heading HTML tag | H2, H3, or H4 for semantic structure |
| Heading size | Small, Medium, Large |
| Text | Body text |
| Button label | CTA text |
| Button link | CTA URL. Button only renders when link is set. |
| Text alignment | Left, Center, Right |
| Vertical alignment | Top, Center, Bottom |
Images
| Setting | Description |
|---|---|
| Image 1 | First image |
| Image 1 link | Optional URL. Wraps image in anchor if set. |
| Image 2 | Second image |
| Image 2 link | Optional URL. Wraps image in anchor if set. |
| Image 1 shape | None, Rounded, Circle, Arch, Blob |
| Image 2 shape | None, Rounded, Circle, Arch, Blob |
| Enable overlap | Overlap two images when both set |
| Overlap intensity | 0 to 40% |
| Disable overlap on mobile | Stack images without overlap on small screens |
| Image size | Small, Medium, Large |
| Border radius | Rounded corners |
| Shadow | Drop shadow |
| Hover zoom | Hover effect |
| Parallax | Scroll parallax effect |
| Disable animation on mobile | Skip scroll animation on mobile |
| Object fit | Cover, Contain |
Layout
| Setting | Description |
|---|---|
| Layout | Image left, Image right |
| Mobile stacking | Image first, Text first |
| Content width | Narrow, Normal, Wide |
| Container width | Page, Large, Full |
Overlap Settings
The Enable overlap setting controls whether the two images overlap when both are set. When enabled, Overlap intensity (0 to 40%) controls how much the images overlap. Disable overlap on mobile stacks images on small screens for better readability and touch targets.
Accessibility Notes
- Section aria label: Customize the accessible name for screen readers.
- Heading tag: Use H2, H3, or H4 for proper semantic hierarchy.
- Button: Only renders when a link is set; no empty href.
- aria-describedby: Button links to content when text is present.
- role="group": Media container is grouped for accessibility.
- Focus styles: All interactive elements have visible focus-visible outlines.
Performance Considerations
- Parallax: Scroll-driven parallax can impact mobile performance; parallax is disabled on mobile by default.
- Image shapes: Reduced to none, rounded, circle, arch, blob for better browser support.
- No :has(): Uses Liquid classes instead of CSS :has() for compatibility.
- Lazy loading: Images use native loading="lazy" except first section.
Animation Limitations
- Scroll animation respects
prefers-reduced-motion. - Disable animation on mobile: When enabled, content shows immediately on small screens.
- Animation uses IntersectionObserver; no layout shift.
Mobile Behavior
- Disable overlap on mobile: Images stack without overlap.
- Disable animation on mobile: Content visible immediately.
- Parallax is disabled on mobile for performance.
- Mobile stacking order: Image first or Text first.
Recommended Image Sizes
- Use at least 800px width for desktop.
- Square or portrait images work well for overlap layout.
- Consistent aspect ratios across both images improve layout.
SEO Best Practices
- Use descriptive alt text for images.
- Choose heading tag (H2/H3/H4) based on page structure.
- Keep headings concise and keyword-relevant.
Theme Store Compliance
- No CLS: Width and height on images preserve layout.
- Lazy loading: Native lazy loading for images.
- Reduced motion support: Animations and parallax disabled when preferred.
- No blocking scripts: JS deferred.
- No external dependencies: Vanilla JS only.
- Accessible focus styles: focus-visible on all interactive elements.
- Semantic heading support: H2, H3, or H4 selectable.
- No :has(): Uses Liquid classes for browser compatibility.
For merchants
- Use two complementary images for visual interest.
- Image shapes (circle, rounded) add creative flair.
- Match layout to content length.
- When both images are blank, a placeholder preview shows the layout.
Reviewer Compliance Checklist
- No layout shift (CLS safe)
- Lazy loading
- Reduced motion support
- No inline JS
- No external dependencies
- Accessible focus styles
- Semantic heading support
- No :has() selector
FAQs
Yes. If you upload only one image, the layout automatically adjusts to a single-image mode. No overlap will be applied and spacing remains consistent.
If no images are uploaded, a Shopify placeholder image is displayed automatically. The section keeps its structure and remains fully editable in the theme editor.
- Image 1 appears in the foreground.
- Image 2 appears in the background.
- The overlap effect is responsive and optimized for all screen sizes.
On mobile devices, stacking behavior follows your selected Mobile stacking setting.
Yes. The section is fully responsive:
- Content stacks vertically on mobile.
- You can choose Image first or Text first.
- Hover zoom works only on pointer devices.
- Parallax is automatically disabled on mobile.
No layout shift occurs because image dimensions are defined using width and height attributes. Images are lazy-loaded by default unless the section appears at the top of the page.
Animation respects the user's
prefers-reduced-motion setting.
- Portrait: 1200 × 1500px
- Square: 1200 × 1200px
- Landscape: 1600 × 1200px
Use WebP format when possible for better performance.
- Images support ALT text.
- Buttons are keyboard accessible.
- Focus states are visible.
- Reduced motion preferences are respected.