Hero: Sliced
A full-screen slideshow cut down the middle; between slides the two halves slide apart in opposite directions and the title breaks along the seam.
Each slide fills the screen, with a photo in each half and a large title across the middle. When the slide changes, the two halves wipe in from opposite directions and the title splits along the seam, then joins again as the new slide comes to rest. The slides can change as the visitor scrolls, on their own, or with arrows.
Choose it to show a few collections, one per slide, with a big name for each. For slides with a row of small pictures, look at Hero: Filmstrip.
Add it
It can go on any page except the password page. In "Add section", find Hero: Sliced under Hero. It is always full screen and runs up under your header.
As first added it has four slides with stand-in pictures: "New in", "Essentials", "Outerwear" and "Accessories", each in large capitals with a small two-line caption above it and a "Shop collection" button leading to all your products. Scrolling moves from slide to slide.
What you need
- One or two photos per slide. Tall or square photos work best, since each fills half the screen. With one photo, it is shown across the whole slide and cut in two down the middle.
- Short titles. One or two words per slide reads best at this size.
Settings
| Setting | What it changes | Options |
|---|---|---|
| Color scheme | The color of the words on every slide that does not choose its own, and of the arrows. See shared settings. | Default: Scheme 2. |
| Movement | How the slides change. Stays on screen while it changes: the section holds still while scrolling moves through the slides, and the page gets about one screen longer for each slide. Changes on its own: moves to the next slide every few seconds, with arrows. Changes with arrows or a swipe: visitors move it themselves. | Stays on screen while it changes, Changes on its own, Changes with arrows or a swipe. Default: Stays on screen while it changes. |
| Content position | Where the words sit on every slide. | Nine places. Default: Center. |
Blocks
Slides
Holds the slides. It is always there and has no settings of its own. The first slide always shows first and cannot be moved or removed; you can add more slides after it, drag them into order and hide them.
Slide
| Setting | What it changes | Options |
|---|---|---|
| First image | The left half on larger screens, the top half on phones, cropped to fit. Set a focal point to choose what stays in view. | Any image. |
| Second image | The right half on larger screens, the bottom half on phones. Leave empty to show the first image across the whole slide, cut in two. | Any image. |
| Use its own color scheme | Turn on to give this slide its own Color scheme. Off, it uses the section's. | Default: off. |
| Strength | Darkens the photos so your words stay readable. | None, Light, Medium, Dark. Default: Dark. |
| Overlay color | The color of the darkening. Only appears when Strength is not None. | Default: black. |
| Overlay style | Behind text darkens the part your words sit on; Whole photo darkens all of it. Only appears when Strength is not None. | Default: Whole photo. |
Inside a slide you can add Text, Giant text, Button and Caption. As added, each slide has a Caption (in the Uppercase style), a Giant text title and a Button.
On phones
Each slide's two photos sit one above the other instead of side by side. With Changes with arrows or a swipe or Changes on its own, visitors swipe sideways to change slides.
Tips
- Pick pairs of photos that work together across the seam: two halves of one look, or a close-up beside a full outfit.
- With Stays on screen while it changes, four slides add about four screens of scrolling. Keep it to three to five.
- Set a slide's Strength to Light or None when its photos are already dark.
Good to know
- Changes on its own waits while the mouse is over the slider, while keyboard focus is inside it, and while it is off screen. Once a visitor uses the arrows, a key or a swipe, it stops until they move away. There is no pause button.
- In the editor, Changes on its own stays still. Preview your store to see it move.
- Visitors who have asked their device to reduce motion see the slides one under the other with Stays on screen while it changes. With the arrows, the slides change without the wipe.
- Visitors can also use the left and right arrow keys once the slider has keyboard focus.