Marquee
A moving line of short statements, in one row or two rows running in opposite directions.
What it does
Runs its blocks as a continuous horizontal line across the section. One row is the classic band. Two rows stacks two lines that move in opposite directions, for a denser, more graphic effect. Items can carry an icon and a link. Font, size, case and the separator between items are settings of the section.
When to use it
Right under the hero on the home page, as a band of brand statements or proof points, and as a divider between chapters on long pages. On a dark color scheme it frames the page; on the page scheme it reads as a quiet line of text. Do not use it for anything a visitor must read to buy. It is atmosphere, not information.
Blocks
- Marquee item: one statement with an optional icon and link.
Setting it up
- Add six to eight Marquee item blocks. Keep each to two to five words.
- Choose Font and Size. Heading font, medium, with the accent font on one word each is the demo setting.
- Set Marquee duration so the text moves slowly enough to read: 30 seconds for eight short items.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Layout | Select | One row runs all items in a single line. Two rows runs them in two lines moving in opposite directions.Options: One row, Two rows · Default: One row |
| Text | ||
| Size | Select | How large the items render.Options: Large, Medium, Small, Extra small · Default: Medium |
| Font | Select | Which of the three theme fonts the items use.Options: Heading font, Body font, Accent font · Default: Heading font |
| Use uppercase | Checkbox | Sets the items in capitals.Default: off |
| Separator | Select | The mark between items. None runs them with spacing only.Options: Dot, Slash, Star, None · Default: Dot |
| Marquee duration | Range | Seconds for one full loop. Higher is slower. Longer text needs a longer duration to move at the same pace.10 to 60 s · Default: 30 |
| Pause on hover | Checkbox | Stops the marquee while the pointer is over it, so a visitor can read or click an item.Default: on |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 20 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 20 |
Marquee item block
| Setting | Type | What it does |
|---|---|---|
| Text | Text | One short statement. Italicize a word to set it in the accent font.Default: Say one thing your shop stands for |
| Icon | Select | A small icon in front of the item.Options: None, Shipping, Returns, Guarantee, Delivery time, Natural, Gift, Secure payment, Check, Star · Default: None |
| Link | Link | Makes the item a link. |
This section also accepts app blocks, so apps that provide one can add content here.
Tips
- Six to eight items make a good loop. Fewer and the repetition is obvious; more and no single item is read.
- Italicize one word per item to set it in the accent font. That is where the editorial look comes from.
- Visitors who prefer reduced motion see the items as a still row they can scroll sideways. Nothing is hidden from them.
- Pause on hover lets a visitor click an item with a link. Leave it on when items link somewhere.