In the theme editor: CustomizeHome pageAdd sectionHero 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

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
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.
Settings every section sharesWindow, Scrolling, Colors

The window, scrolling, spacing and color settings work the same way in every section. Read how they work.

Window

Attach
Choice: Separate window, Attached to the window above, Attached to the window below, Attached above and belowDefault: Separate window

Scrolling

Next section covers it on scroll
On or offDefault: OffScrolling down, this section stays in place under the header and the next section rises over it. Scrolling back reverses it. Off in the editor, for visitors who asked for reduced motion and on very short screens.

Colors

Use custom colors for this section
On or offDefault: OffOtherwise the section uses the theme colors. The color is the strip around the banner and the logo notch. The words and dots on the picture are always white.
Background
ColorDefault: #F1F1EF

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
Settings every section sharesColors

Colors

Background color
ColorEmpty: by the banner button style. With the glass style, the glass transparency applies to this color too.
Text color
ColorEmpty: by the banner button style.
Background color on hover
ColorWhen the pointer is over the button, on desktop. Empty: no change.
Text color on hover
ColorWhen the pointer is over the button, on desktop. Empty: no change.
Border color
ColorEmpty: by the banner button style. A fully transparent color: no border and no shadow.
Border thickness
Slider, 1 to 4 pxDefault: 1 px
Opacity
Slider, 0 to 100 %Default: 100 %100 is fully solid, 0 fully clear.

Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.