In the theme editor: Customize›Home page›Add section›Hero slideshow
Hero slideshow
Full-width slides at the top of the page, each with its own picture for computer and phone, a heading, a line and up to two buttons.
Two buttons on one slide, like “Shop women” and “Shop men”, send each audience straight to its collection. Pictures: 3840 × 1740 for computers, 1200 × 2640 for phones.
Settings
Banner
- Corner roundness
- Slider, 0 to 40 pxDefault: 26.4 px
- Space between pictures
- Slider, 0 to 40 pxDefault: 0 pxDefault 0: slides swap inside the frame with no gap. A gap above zero shows while switching.
Picture look
- Banner picture on desktop
- Choice: Whole picture (by picture ratio), Fill the screen (crops edges)Default: Whole picture (by picture ratio)Whole picture: the original picture in full, never cropped or enlarged. The banner is as tall as the tallest picture (up to the screen height), and a wider picture shows whole with a dark band above and below. When all pictures share one shape there are no bands. Fill the screen: the banner takes the whole first screen, and the picture is cropped at the edges to fill it.
- Banner picture on phone
- Choice: Whole picture (by picture ratio), Fill the screen (crops edges)Default: Fill the screen (crops edges)Whole picture: the original picture in full, never cropped or enlarged. The banner is as tall as the tallest picture (up to the screen height), and a wider picture shows whole with a dark band above and below. When all pictures share one shape there are no bands. Fill the screen: the banner takes the whole first screen, and the picture is cropped at the edges to fill it.
- Darken the picture
- Slider, 0 to 60 %Default: 0 %A dark layer over the picture, so words placed on it stay readable. 0 means no layer.
- Zoom out while a slide is shown
- On or offDefault: OnThe picture starts enlarged and slowly pulls back to its full size while the slide is shown. With automatic change it lasts 90% of the slide's time; otherwise 4.5 seconds. Off when the device is set to reduce motion. Slides with a video don’t zoom.
- Starting enlargement
- Slider, 102 to 140 %Default: 128 %
Words and button
- Text position
- Choice: Center, Corner, FreeDefault: CenterCenter: the words and the button sit centered at the bottom of the image. Corner: in the bottom corner on the side where reading starts (right in Hebrew, left in English), aligned to that side. Free: each element (heading, small line, button) at the place, size and color set in its own block, separately for phones and desktop.
- Button look
- Choice: Glass (see-through), Dark, Light, Solid lightDefault: Glass (see-through)
- Glass transparency
- Slider, 0 to 100 %Default: 70 %0 is fully clear, 100 solid. The thin line around the button stays.
- Arrow after the button text
- On or offDefault: OnPoints forward: left in Hebrew, right in English. Not shown on phones. An arrow typed at the end of a button text is replaced by this one.
- Shine on the button
- On or offDefault: OnA light sweep passes over the button every few seconds, only while it is on screen. Off when the device is set to reduce motion.
- How the words enter
- Choice: Slow glide (like "New arrivals"), One after another, All together, Light trail, No entranceDefault: Slow glide (like "New arrivals")When a slide arrives, its words move into place. Light trail: half a second after the image starts moving, the line, the heading and the button are revealed together with a soft edge from the side the image comes from, on phones and desktop. Slow glide: they rise together on the "New arrivals" heading curve, 3.4 seconds. One after another and All together are quicker. These three are phone only. Off on devices set to reduced motion.
Movement
- Change slides automatically
- On or offDefault: OnIt stops while a visitor uses the keyboard inside it, drags it or presses pause, and while it is off screen or the tab is hidden.
- Time each slide is shown
- Slider, 2 to 10 sDefault: 5 s
- Pause while the mouse is over it
- On or offDefault: OffComputers with a mouse only. Off by default: the slides keep changing.
- Speed of the change between slides
- Choice: Fast, Normal, SlowDefault: Normal
Navigation
- Show dots under the pictures
- On or offDefault: OnOne per slide. The current one is longer and fills while waiting for the next change.
- Space between dots
- Choice: Roomy, CompactDefault: RoomyThe space between the dots under the pictures. The dots only show the position: swipe on phones, and drag or turn on the arrows on desktop.
- Show arrows
- On or offDefault: OffCoin-style arrows on the picture edges, on desktop only. On phones and tablets, swipe.
- Always show the pause button
- On or offDefault: OffOtherwise the pause button appears only when reached with the keyboard.
Accessibility
- Name for screen readers
- TextRead aloud when a screen reader reaches the slideshow. Empty: a general name.
Blocks
Blocks are the pieces inside the section. Add, remove and drag them in the editor to change the order.
Image
Pictures
- Picture for computers
- ImageThe picture's focal point (in the picture picker) chooses what stays in view when it is cropped.
- Picture for phones
- ImageOptional. Empty: the picture for computers is used on phones too.
- Video
- Video fileIf a video is chosen it replaces the image and starts only when it scrolls into view. The image stays as the poster.
- Phone video
- Video fileOptional. When empty the phone shows the regular video.
- Picture description
- TextRead aloud to visitors who cannot see the picture. If there are words inside the picture, write them here. Empty: the description saved with the picture.
HeadingInside Image
General
- Text
- Text
Look
- Size on phones
- Slider, 0 to 96 pxDefault: 0 px0: automatic, as in the theme.
- Size on desktop
- Slider, 0 to 140 pxDefault: 0 px0: automatic, as in the theme.
- Weight
- Slider, 0 to 900Default: 00: automatic, as in the theme.
- Color
- ColorEmpty: white.
- Opacity
- Slider, 0 to 100 %Default: 100 %100 is fully solid, 0 fully clear.
Free position
- Distance from the side, phone
- Slider, 0 to 100 %Default: 6 %0 is the side where reading starts (left in English, right in Hebrew), 100 the other side. The point is the edge of the text by its alignment, or its center when centered.
- Height, phone
- Slider, 0 to 100 %Default: 70 %0 is the top of the image, 100 the bottom. The point is the middle of the line.
- Distance from the side, desktop
- Slider, 0 to 100 %Default: 6 %0 is the side where reading starts (left in English, right in Hebrew), 100 the other side. The point is the edge of the text by its alignment, or its center when centered.
- Height, desktop
- Slider, 0 to 100 %Default: 68 %0 is the top of the image, 100 the bottom. The point is the middle of the line.
- Alignment
- Choice: Start, Center, EndDefault: StartAlso the position point: the start, center or end of the text.
- Maximum width on phones
- Slider, 0 to 100 %Default: 0 %Percent of the image width. 0: by the length of the text. Longer text wraps.
- Maximum width on desktop
- Slider, 0 to 100 %Default: 0 %Percent of the image width. 0: by the length of the text. Longer text wraps.
Small lineInside Image
General
- Text
- Text
Look
- Size on phones
- Slider, 0 to 40 pxDefault: 0 px0: automatic, as in the theme.
- Size on desktop
- Slider, 0 to 48 pxDefault: 0 px0: automatic, as in the theme.
- Weight
- Slider, 0 to 900Default: 00: automatic, as in the theme.
- Color
- ColorEmpty: white.
- Opacity
- Slider, 0 to 100 %Default: 100 %100 is fully solid, 0 fully clear.
Free position
- Distance from the side, phone
- Slider, 0 to 100 %Default: 6 %0 is the side where reading starts (left in English, right in Hebrew), 100 the other side. The point is the edge of the text by its alignment, or its center when centered.
- Height, phone
- Slider, 0 to 100 %Default: 79 %0 is the top of the image, 100 the bottom. The point is the middle of the line.
- Distance from the side, desktop
- Slider, 0 to 100 %Default: 6 %0 is the side where reading starts (left in English, right in Hebrew), 100 the other side. The point is the edge of the text by its alignment, or its center when centered.
- Height, desktop
- Slider, 0 to 100 %Default: 77 %0 is the top of the image, 100 the bottom. The point is the middle of the line.
- Alignment
- Choice: Start, Center, EndDefault: StartAlso the position point: the start, center or end of the text.
- Maximum width on phones
- Slider, 0 to 100 %Default: 0 %Percent of the image width. 0: by the length of the text. Longer text wraps.
- Maximum width on desktop
- Slider, 0 to 100 %Default: 0 %Percent of the image width. 0: by the length of the text. Longer text wraps.
ButtonInside Image
General
- Button text
- TextEmpty, with an empty link too: "All collections" to the collections page.
- Link
- LinkEmpty, with empty text too: the collections page.
Position
- Button position
- Choice: With the text, FreeDefault: With the textWith the text: under the heading, where the banner text is placed. Free: anywhere on the image, by the settings below, while the text stays where it is.
- Distance from the side, phone
- Slider, 0 to 100 %Default: 6 %0 is the side where reading starts (left in English, right in Hebrew), 100 the other side. The point is the edge of the text by its alignment, or its center when centered.
- Height, phone
- Slider, 0 to 100 %Default: 88 %0 is the top of the image, 100 the bottom. The point is the middle of the line.
- Distance from the side, desktop
- Slider, 0 to 100 %Default: 6 %0 is the side where reading starts (left in English, right in Hebrew), 100 the other side. The point is the edge of the text by its alignment, or its center when centered.
- Height, desktop
- Slider, 0 to 100 %Default: 86 %0 is the top of the image, 100 the bottom. The point is the middle of the line.
- Alignment
- Choice: Start, Center, EndDefault: StartAlso the position point: the start, center or end of the text.
Size
- Width on phones
- Slider, 0 to 400 pxDefault: 0 px0: by the length of the text. The text is always centered in the button.
- Width on desktop
- Slider, 0 to 400 pxDefault: 0 px0: by the length of the text. The text is always centered in the button.
- Height on phones
- Slider, 0 to 96 pxDefault: 0 px0: automatic, as in the theme.
- Height on desktop
- Slider, 0 to 96 pxDefault: 0 px0: automatic, as in the theme.
- Text size on phones
- Slider, 0 to 40 pxDefault: 0 px0: automatic, as in the theme.
- Text size on desktop
- Slider, 0 to 40 pxDefault: 0 px0: automatic, as in the theme.
- Text weight
- Slider, 0 to 900Default: 00: automatic, as in the theme.
- Button size on phones
- Slider, 50 to 200 %Default: 100 %Enlarges or shrinks the whole button, text included, in the same proportion.
- Button size on desktop
- Slider, 50 to 200 %Default: 100 %Enlarges or shrinks the whole button, text included, in the same proportion.
Shape
- Corners
- Choice: Like every button on the site, Square, Fully round, CustomDefault: Like every button on the site
- Corner rounding
- Slider, 0 to 40 pxDefault: 10 px
Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.
