Marquee
A strip of words and small pictures that scrolls across the page without stopping.
A single line of words and small pictures that runs across the full width of the screen and loops forever. Brands use it for a short message that should be hard to miss, such as free shipping, a new drop or a sale, or as a moving band between two sections.
Add it
It can go on any page, but not in the header or footer. Choose "Add section" and look for Marquee under Text.
As first added it holds four blocks: a picture, "New arrivals every week", a second picture and "Free shipping on orders over $100", in Heading 3 style. It has no space above or below, so it sits right against the sections around it.
The two pictures start empty. In the editor they show as placeholder drawings; on your store an empty picture shows nothing. Choose a photo for each, or delete them.
What you need
- One or two short lines. Three to six words each read best while moving.
- Small cutout photos, if you want pictures. A product or a person on a see-through background looks best. The picture keeps its own shape and is set to a height, so a wide photo takes a lot of room.
Settings
| Setting | What it changes | Options |
|---|---|---|
| Color scheme | The strip's background and the color of the words. See shared settings. | Any of your schemes. Default: Scheme 1. |
| Space above, Space below | Empty space above and below the strip. See shared settings. Custom goes from 0 to 100 px. | As added: None. |
Motion
| Setting | What it changes | Options |
|---|---|---|
| Motion direction | Which way the strip runs. Forward moves right to left; Reverse moves left to right. | Forward (default), Reverse |
| Speed | How fast it runs. Motion in Theme settings slows every speed when set to Calm. | Slow, Medium (default), Fast |
| Pause on hover | On: the strip slows to a stop while the mouse rests on it, and picks up again when it leaves. | Off (default) |
| Gap | The space between each word and picture. | 0 to 100 px. Default: 24 px. |
Blocks
Add as many as you like, in any order, and drag them to reorder. The strip repeats them until the line is full, so a few blocks are enough.
Scrolling text
| Setting | What it changes | Options |
|---|---|---|
| Text | The words. You can make them bold, italic or a link. | Default for a new block: "Made to be worn in". |
| Style | Which of your type styles the words use. | Body, Uppercase, Heading 1 to Heading 6. Default for a new block: Heading 1. |
| Stay readable over photos | Meant for words laid over a photo. This section has its own background behind the words, so leave it off here. | Off (default) |
Marquee image
| Setting | What it changes | Options |
|---|---|---|
| Image | The picture. | Any image. |
| Size | How tall the picture is: 48, 64 or 96 px. Its width follows the photo's shape. | Small, Medium (default), Large |
The strip also takes app blocks.
On phones
The strip runs edge to edge, as on desktop. A tap on the strip stops it; a second tap, or a tap anywhere else, starts it again.
Tips
- Put a picture between every two lines. It breaks up the words so the strip reads as separate messages, not one long sentence.
- Use Heading 3 or smaller for a band between sections. Heading 1 makes a strip that dominates the page.
- Give the strip a different Color scheme from the sections above and below it to make it stand out as a band.
- Add a link to the words of a sale message so visitors can click straight through.
Good to know
- Whatever Pause on hover is set to, the strip stops when a visitor reaches a link in it with the keyboard, and when it is tapped on a phone.
- Visitors who have asked their device to reduce motion see the strip standing still.
- The strip is as tall as its tallest word or picture.
- To run a strip inside another section, such as over a hero photo, use the Marquee block instead. That is where Stay readable over photos is useful.