Collections: Hover reveal
A list of collection names set very large; pointing at one opens its picture behind the words.
Your collection names, set very large and run together like a sentence: "New arrivals, Bestsellers, Essentials, Shop all." When a shopper points at a name, its picture opens in a window behind the words, and the name is underlined. Clicking a name opens the collection.
Choose it when you have a few collections and want the names themselves to be the design. For pictures first, use Collections: Row or Collections: Tiles.
Add it
It can go on any page. Find Collections: Hover reveal under Collections in "Add section".
As first added it fills the screen with four names: "New arrivals", "Bestsellers", "Essentials" and "Shop all". None has a collection yet, so each opens all your products, and in the editor they show a sample picture.
What you need
- A handful of collections. At Heading 1 the names are very large, so a long list fills the screen quickly.
- A picture for each: the collection's own image, or one you choose for the name. A collection with no image uses its first product's photo.
Settings
| Setting | What it changes | Options |
|---|---|---|
| Color scheme | The background and the names. See shared settings. | Default: Scheme 1. |
| Height | Full screen fills the screen. Large is about four fifths of it, Medium about three fifths. | Full screen, Large, Medium. Default: Full screen. |
| Space above, Space below | Empty space at the top and bottom. See shared settings. | Default: Medium. |
Preview window
| Setting | What it changes | Options |
|---|---|---|
| Show pictures on hover | Off: a plain list of names, with no pictures. The settings below are hidden. | Default: on. |
| Size | How much of the section the picture covers. | Small (40% × 30%), Medium (60% × 50%), Large (80% × 70%), Full. Default: Medium. |
| Image shape | The shape of the box each picture fits inside. Pictures are never cropped: a picture of another shape shows whole, smaller, inside the box. Adapt to image uses the whole window set by Size. Hidden when Size is Full. | Adapt to image, Portrait, Square, Landscape. Default: Adapt to image. |
| Corners | How round the picture's corners are. | None, Slight, Round. Default: Slight. |
| Name color over pictures | Difference turns the names the opposite color of the picture behind them, so they stay readable on any picture. Normal keeps the color scheme's text color. | Difference (high-contrast, varies with image), Normal (uses color scheme foreground). Default: Difference. |
Blocks
Collection names
The list itself. It is always there.
| Setting | What it changes | Options |
|---|---|---|
| Collections | The quick way: pick collections and each becomes a name with its own picture. While any are picked, the Collection name blocks are not shown. | Up to 20 collections. |
| Style, Trailing punctuation, Hover underline | The same as on a Collection name block (below), for every picked collection at once. Appear only when Collections has some picked. | Defaults: Heading 1, Comma, Sweep across. |
| Alignment | Where the names line up. | Left, Center, Right. Default: Left. |
| Max width | How far a line of names runs before it wraps. | Narrow, Medium, Wide, Full width. Default: Full width. |
| Space between links | The space between names. | Small, Medium, Large. Default: Medium. |
Collection name
The other way: leave Collections empty and add one block per name. Drag them to change the order.
| Setting | What it changes | Options |
|---|---|---|
| Collection | The collection the name opens and takes its name and picture from. | Any collection. |
| Name | The words shown. Leave empty to use the collection's name. | Text. |
| Trailing punctuation | The mark after the name. A comma after the last name is left out by itself. | None, Comma ,, Period ., Em dash —, Slash /, Bullet •. Default: Comma. |
| Style | How large the name is. | Heading 1 to Heading 4. Default: Heading 1. |
| Hover underline | The line drawn under the name on hover. Grow from left draws in and out from the left. Sweep across draws in from the left and leaves to the right. | None, Grow from left, Sweep across. Default: Sweep across. |
| Image | A picture for this name. Leave empty to use the collection's image. | Any image. |
| Link target | Where the name goes. | Collection page, Custom URL. Default: Collection page. |
| Custom URL | Any page. Appears with Custom URL. | Any link. |
On phones
Phones and tablets have no pointer to hover with, so no pictures open. Shoppers see the list of names and tap one to open it.
Tips
- Keep names short. One or two words per name keeps the list reading as a line, not a block of text.
- With Difference, pictures with strong light and dark areas give the most striking names. With a soft or mid-tone picture, try Normal.
- End the last name with a Period for a finished sentence, as the section does when first added.
Good to know
- In the editor the first name's picture stays open so you can see your window settings change. Shoppers see a picture only while pointing at a name, or while it has keyboard focus.
- A name with no collection and no image opens no picture on your store. With no collection, it opens all your products.
- With no names at all, the section is hidden from shoppers.
- Visitors who ask their device to reduce motion see pictures appear at once instead of opening.