Multipurpose theme documentation
Multipurpose Fashion Theme
Split Optional Slides
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Hero & Banner Sections > Split (Optional Slides)
Overview
The Split (optional slides) section displays a split layout: image on one side, text content on the other. Each slide can have subheading, heading, text, buttons, and an optional second image. Supports multiple slides, color schemes, textures, and autoplay. Use it for storytelling, product launches, or featured campaigns with a strong visual and copy balance.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or desired template.
- Click Add section.
- Choose Split (optional slides).
- Save.
📷 Image placeholder: Add a screenshot of Split optional slides on storefront.
Quick Setup (4 Steps)
- Add Slide blocks — Add one Slide block per slide.
- Add content — For each: image, subheading, heading, text, button.
- Set text position — Choose text left or right per slide.
- Configure section — Set full width, autoplay, navigation.
Section Settings
| Setting | Description | Default |
|---|---|---|
| Full width | Stretch to viewport | — |
| Desktop height adjust | Slide height on desktop | 0 |
| Mobile height adjust | Slide height on mobile | 0 |
| Navigation style | Arrows, Dots, etc. | Arrows |
| Autoplay | Auto-rotate slides | — |
| Autoplay delay | Seconds between slides | 5 |
| Enable drag | Swipe on mobile | — |
| Animation type | Slide-left, Slide-right, Fade | Slide left |
| Border radius | Rounded corners | 0 |
| Color scheme | Theme color scheme | Scheme 1 |
Blocks: Slide
Each slide is a Slide block. Add multiple blocks for multiple split slides.
| Setting | Description |
|---|---|
| Image | Main slide image |
| Intent image | Optional second/overlay image |
| Color scheme | Block color scheme (1, 2, 3) |
| Grid pattern | Background grid pattern |
| Subheading | Small text above heading |
| Heading | Main headline |
| Heading size | Font size (px) |
| Text | Body text |
| Link | Primary button URL |
| Button label | Primary button text |
| Link 2 | Secondary button URL |
| Button label 2 | Secondary button text |
| Text position | Left or Right |
| Text animation delay (ms) | Optional delay (0–500ms) before text sequence starts on this slide |
Accessibility
The slider is built for Theme Store accessibility compliance:
-
ARIA:
aria-live="polite"on the track;aria-controlson Prev/Next;aria-orientation="horizontal"on dots. -
Focus: Focusable elements in hidden slides are removed from
tab order (
tabindex="-1"); restored when the slide is visible. - Keyboard: Arrow Left/Right to change slides; Escape to stop autoplay.
- Autoplay: Pauses on interaction; resumes only when the user leaves the slider (mouse leave, focus out).
-
Touch: Drag uses
preventDefault()to avoid vertical scroll interference.
Sequential text animation
When a slide becomes active, the text content animates in a smooth sequence
after the slide transition completes. Elements animate in this order:
subheading, heading, text, primary button, secondary button. Each element
fades in and moves up slightly (opacity 0→1, translateY 20px→0) with a 200ms
stagger between items. The animation respects
prefers-reduced-motion and is disabled when users have reduced
motion enabled.
Step-by-Step Setup
Step 1: Add the section
Add Split (optional slides) to your homepage or template.
Step 2: Add Slide blocks
- Click Add block > Slide.
-
For each slide:
- Upload Image (main visual)
- Enter Heading and Text
- Set Link and Button label
- Choose Text position (left or right) — determines which side shows text
- Optionally add Subheading, Intent image, or second button.
Step 3: Customize per slide
- Set Color scheme per block for variety.
- Add Grid pattern if desired for background texture.
Step 4: Configure section
- Set Full width On for edge-to-edge display.
- Enable Autoplay and set Autoplay delay (e.g. 5 seconds).
- Choose Navigation style (Arrows or Dots).
- Select Animation type (Slide left, Slide right, or Fade).
- Ensure Enable drag is On for mobile swipe.
- Save.
Use cases
- Product launch — Image of product with copy and CTA
- Storytelling — Alternating text-left/text-right slides
- Campaign focus — One message per slide, strong visual balance
- Collection highlight — Collection imagery with supporting text
For merchants
- Use split layout when you want equal emphasis on image and copy.
- 2–4 slides is typical; match image and text for each.
- Test Text position (left vs right) for visual balance.
Previous steps
Next steps
Common mistakes
| Mistake | Fix |
|---|---|
| No image | Upload Image in each Slide block |
| Text too long | Keep heading short; 1–2 sentences for body |
| Wrong text side | Use Text position to flip layout per slide |
| No buttons | Add Button label and Link for CTA |
FAQs
You can add up to 5 slides per section. For best performance, we recommend 2–4 slides.
Navigation controls are hidden and autoplay is disabled. The section behaves as a static split banner.
Yes. Each slide has a Text position setting that allows left or right alignment.
Autoplay pauses on hover, focus, and when the browser tab is inactive. It is disabled if the user prefers reduced motion.
Use images at least 2000 × 1200 px. Avoid small or heavily compressed files.
Both the button label and link must be filled. If one is empty, the button will not render.
If reduced motion is enabled in your system settings, animations are automatically disabled.
Check if autoplay is enabled in section settings. Autoplay pauses when hovering or interacting with the slider.
Yes. It uses proper ARIA roles, keyboard navigation, focus management, aria-hidden toggling, and respects prefers-reduced-motion.
Yes. Autoplay pauses on hover, focus, user interaction, and tab visibility changes. It is disabled for reduced motion users.
Yes. The section supports dynamic blocks, section lifecycle events, and uses scoped assets.