Documentation

Every setting, explained

What each embed does, every look, and every setting in the theme editor.

The two embeds

Segue adds two app embeds to your theme, each with its own switch in the theme editor under App embeds. Segue plays a transition on every click within the shop. Segue preloader plays once when a visit starts. Use either, or both. Neither edits your theme’s code; switching one off, or uninstalling, leaves the theme as it was.

Transitions

Fourteen looks and an Automatic mode, each with its own options under "Show more options".

Automatic: Picks the move for each click: product photos fly into their page, buttons grow, everything else gets Wave.Comes in from: The bottom, The top · Show your logo while the page loads: on, off
Wave: Three coloured layers rise over the page in a wave and lift away on arrival.Comes in from: The bottom, The top · Show your logo while the page loads: on, off
Crystal: Bands of slats close over the page like blinds and open again.Number of slats: 8–24 · Rows of slats: 2–6 · Direction: Bands alternate, Left to right, Right to left · Show your logo while the page loads: on, off
Emblem: Your mark, cut in two, presses the page shut from opposite corners, turns, breathes, beats or parts while it holds, and pulls the next page open.Starts from: Top left and bottom right, Bottom left and top right · While the page loads, your logo: Turns once, Breathes, Beats like a heart, Floats, Splits in two and joins again, Keeps still
Deck: The page shrinks to a card and slides off; the next page is dealt in as a card and grows to fill the screen.Comes in from: The right, The left · What slides in: The page itself, A card with the page's name and photo, A run of your product photos · Show your logo while the page loads: on, off
Letters: The destination's name, set large in your heading font: rising, falling, fading, zooming, tumbling or typed; solid or outlined.How the letters arrive: Rise from below, Fall from above, Fade in, Zoom in, Tumble in, Typed, one by one · Size: As large as fits, Giant, cropped by the screen, Modest · Capitals: As written, All capitals, All small letters · Look: Solid, Outline, Solid and outline, alternating
Curve: A doodle (hook, wave, loop, zigzag, scribble or spiral) is drawn across the page until it covers it; a second erases it.Comes in from: The right, The left · Path of the stroke: Hook: over the top and down the side, Wave across, Loop-the-loop, Zigzag, Scribble, Spiral out from the centre · Show your logo while the page loads: on, off
Pulse: Ripples in your colours swell out of whatever was pressed; your mark pulses in the middle; the new page is uncovered from its edges inward.
Stripes: Stripes drop in as a wave (pinstriped, plain, three-colour or wide and narrow); your mark pops in the middle.Comes in from: The bottom, The top · Number of stripes: 5–15 · Pattern: Two tones with pinstripes, Two tones with double pinstripes, Plain blocks, two tones, Blocks in three colours, Wide and narrow, alternating · Order: Sides first, centre last, Centre first, sides last, Left to right
Checkered: A board of squares pops in, square by square, your mark in the centre.Squares across: 4–14 · Order: From the centre, From the sides, Scattered
Void: The page falls away into the distance; your mark comes forward, and you dive through it.Words beside your logo: your words
Bars: Bars, standing or lying, send their leading edges across the screen one after another; a four-square loop holds.Number of bars: 3–9 · Comes in from: The bottom, The top, The left, The right · Then the bars: Go back the way they came, Carry on through the far edge
Tide: A sheet with a rough, hand-cut edge rises over the page and carries on to uncover the next.Comes in from: The bottom, The top · Show your logo while the page loads: on, off
Blind: A panel rises over the page like a blind, the page’s name fades in at its middle, and it drops away to show the next page.
Portal: Your logo is the door: the page leaves into one piece of it, the camera pulls back to the whole logo, and flies in through another piece onto the next page.While your logo shows: Twinkles, Floats, Shines, Keeps still · Logo size: 40–120 %

Settings of the Segue embed

1. Pick a look

Style: the best move for each link · coloured layers rise over the page · slats sweep across, like blinds · your logo turns as the page changes · the page slides away like a card · the next page's name, letter by letter · a broad brush stroke sweeps the screen · the button you press grows to fill the screen · stripes slide down like a curtain · squares pop in across the screen · the page shrinks away behind your logo · bars rise one after another · a soft wave washes over the page · one panel rises with the page's name · fly into a piece of your logo — Each change plays right here on the page, so you can watch it before you save.
Speed: 50 to 150 %, 100% to start — Slower ← → faster. 100 % is the designed pace.

2. Your logo and words

What shows while the next page loads: Your logo (or your shop name if there is none) · Your logo · Your shop name · A simple symbolnot for Deck, Letters
Your logo: an image from your files — Leave empty to use the logo from your theme.not for Deck, Letters
Words beside your logo: your words — Optional. A short line, revealed letter by letter.for Void

3. Colours

Colours: From your shop (automatic) · My own colours — Automatic picks up your buttons, text and background.
Main colour: a colourwith your own colours
Second colour: a colourwith your own colours
Third colour: a colour — Words and logos on top turn dark or light so they stay easy to read.with your own colours

More options

Show more options: on or off — Directions, patterns, the font, and a different look for different pages. Everything already looks good without them.
Font for words: The same as your headings · The same as your text · Choose a font — Used where Segue writes words: Letters, Deck, Void, and your shop name.under More options
Font: any font in Shopify’s libraryunder More options; with a font of your choice
Comes in from: The bottom · The topunder More options; for Wave, Automatic, Stripes, Tide
Comes in from: The right · The leftunder More options; for Curve, Deck
Number of slats: 8 to 24, 16 to startunder More options; for Crystal
Rows of slats: 2 to 6, 4 to startunder More options; for Crystal
Direction: Bands alternate · Left to right · Right to leftunder More options; for Crystal
Starts from: Top left and bottom right · Bottom left and top rightunder More options; for Emblem
While the page loads, your logo: Turns once · Breathes · Beats like a heart · Floats · Splits in two and joins again · Keeps stillunder More options; for Emblem
What slides in: The page itself · A card with the page's name and photo · A run of your product photosunder More options; for Deck
How the letters arrive: Rise from below · Fall from above · Fade in · Zoom in · Tumble in · Typed, one by oneunder More options; for Letters
Size: As large as fits · Giant, cropped by the screen · Modestunder More options; for Letters
Capitals: As written · All capitals · All small lettersunder More options; for Letters
Look: Solid · Outline · Solid and outline, alternatingunder More options; for Letters
Path of the stroke: over the top and down the side · Wave across · Loop-the-loop · Zigzag · Scribble · Spiral out from the centreunder More options; for Curve
Number of stripes: 5 to 15, 11 to startunder More options; for Stripes
Pattern: Two tones with pinstripes · Two tones with double pinstripes · Plain blocks, two tones · Blocks in three colours · Wide and narrow, alternatingunder More options; for Stripes
Order: Sides first, centre last · Centre first, sides last · Left to rightunder More options; for Stripes
Squares across: 4 to 14, 8 to startunder More options; for Checkered
Order: From the centre · From the sides · Scatteredunder More options; for Checkered
Show your logo while the page loads: on or off — Your logo appears once the screen is covered.under More options; for Wave, Crystal, Curve, Tide, Deck, Automatic
Number of bars: 3 to 9, 5 to startunder More options; for Bars
Comes in from: The bottom · The top · The left · The rightunder More options; for Bars
Then the bars: Go back the way they came · Carry on through the far edgeunder More options; for Bars
While your logo shows: Twinkles · Floats · Shines · Keeps stillunder More options; for Portal
Logo size: 40 to 120 %, 100% to startunder More options; for Portal
Going to the home page: The same as above · the best move for each link · coloured layers rise over the page · slats sweep across, like blinds · your logo turns as the page changes · the page slides away like a card · the next page's name, letter by letter · a broad brush stroke sweeps the screen · the button you press grows to fill the screen · stripes slide down like a curtain · squares pop in across the screen · the page shrinks away behind your logo · bars rise one after another · a soft wave washes over the page · one panel rises with the page's name — A different look for where a link leads. Leave it on "The same as above" to keep one look everywhere.under More options
Going to a product: The same as above · the best move for each link · coloured layers rise over the page · slats sweep across, like blinds · your logo turns as the page changes · the page slides away like a card · the next page's name, letter by letter · a broad brush stroke sweeps the screen · the button you press grows to fill the screen · stripes slide down like a curtain · squares pop in across the screen · the page shrinks away behind your logo · bars rise one after another · a soft wave washes over the page · one panel rises with the page's nameunder More options
Going to a collection: The same as above · the best move for each link · coloured layers rise over the page · slats sweep across, like blinds · your logo turns as the page changes · the page slides away like a card · the next page's name, letter by letter · a broad brush stroke sweeps the screen · the button you press grows to fill the screen · stripes slide down like a curtain · squares pop in across the screen · the page shrinks away behind your logo · bars rise one after another · a soft wave washes over the page · one panel rises with the page's nameunder More options
Going anywhere else: The same as above · the best move for each link · coloured layers rise over the page · slats sweep across, like blinds · your logo turns as the page changes · the page slides away like a card · the next page's name, letter by letter · a broad brush stroke sweeps the screen · the button you press grows to fill the screen · stripes slide down like a curtain · squares pop in across the screen · the page shrinks away behind your logo · bars rise one after another · a soft wave washes over the page · one panel rises with the page's nameunder More options

Preloaders

Nine looks, each built around your logo and your words; its own colours or yours.

Spin: two big lines trade places: A poster of two big lines that trade places letter by letter, a word or your logo between them, then split open onto the page.
Squash: your words stretch and flip: Your words, stretched across the screen, flip and squash between colours, then stream away.
Capsule: a glowing pill with your logo: A pill with your logo squeezes and stretches into a glowing capsule that opens onto the page.
Bricks: bars build your logo: A brick unfolds into a column of bars that build your logo, then the logo melts away into the page.
Pixel: blocks build your logo: Two squares burst into blocks that build your logo, sharpen into it, and leave in bars.
Blueprint: your logo drawn like a sketch: A cursor traces your logo like a pen tool on a blue canvas, colours it, and cuts the canvas open.
Twirl: your logo spins next to your name: Your logo spins into place beside your name, spins back, and the page opens through its shape.
Status: a ring turns into an “Online” pill: A ring spins around your logo, pops into an “Online” pill, and bursts open onto the page.
Bloom: your logo grows out of a dot: A line of type is wiped away by a sweeping bar; a dot blooms into your logo, which flies open onto the page.

Settings of the Segue preloader embed

1. Pick a look

Style: two big lines trade places · your words stretch and flip · a glowing pill with your logo · bars build your logo · blocks build your logo · your logo drawn like a sketch · your logo spins next to your name · a ring turns into an “Online” pill · your logo grows out of a dot — Each one plays while your shop loads, then opens onto your page. See them all moving on the Segue app's home page.
When it shows: When someone arrives · When someone arrives on the home page · Every page load (only for testing) — It plays once as a visitor arrives, not while they click around. Here in the editor it repeats so you can see your changes.
Speed: 50 to 150 %, 100% to start — Slower ← → faster. 100 % is the pace it was designed at.

2. Your logo and words

Your logo: an image from your files — Leave empty to use the logo from your shop's brand settings.not for Spin: two big lines trade places; with a logo in the middle
Your words: your words — The words your preloader shows. Leave empty to use your shop's name. For Squash, put commas between words. Up to 40 letters.not for Spin: two big lines trade places
Small label: your words — A few words beside your logo, such as (NOW OPEN). Leave empty for none. Up to 24 letters.for Bloom: your logo grows out of a dot, Bricks: bars build your logo
Inside the circle: Your logo · A globe · The first letter of your shop's namefor Status: a ring turns into an “Online” pill
Top line: your words — The two lines swap places, so words of a similar length look best. Up to 24 letters each. Leave empty to use your shop's name.for Spin: two big lines trade places
Bottom line: your wordsfor Spin: two big lines trade places
Between the lines: A word · Your logofor Spin: two big lines trade places
Middle word: your words — Up to 16 letters.for Spin: two big lines trade places; with a word in the middle
Small text, left: your words — Up to 4 short lines on each side. On phones there's no room, so it's left out.for Spin: two big lines trade places
Small text, right: your wordsfor Spin: two big lines trade places

3. Colours

Colours: Use the style's own colours · Use my colours
Background: a colourwith your own colours
Text and logo: a colourwith your own colours
Highlight: a colour — Status: the pill. Squash: the background of the second word.with your own colours

More options

Show more options: on or off — Font, sizes and finer details. Everything already looks good without them.
Font: any font in Shopify’s libraryunder More options
Number of flips: 0 to 3, 1 to startunder More options; for Squash: your words stretch and flip
Letter spacing: 0 to 60, 15 to startunder More options; for Squash: your words stretch and flip
How it ends: The words squash away · On your logounder More options; for Squash: your words stretch and flip
Ring colour: Rainbow · Highlight colourunder More options; for Status: a ring turns into an “Online” pill
Caption at the top: your words — One line, up to 70 letters.under More options; for Spin: two big lines trade places
Size: 30 to 100 %, 100% to start — The whole poster. 100 % fills most of the screen's width.under More options; for Spin: two big lines trade places
Small text alignment: Left · Centre · Right — How the lines of the two small texts line up. The poster always stays centred.under More options; for Spin: two big lines trade places

Where the colours, the logo and the font come from

Colours: Automatic reads your theme’s buttons, links and colour variables, and your logo; or set a main, a second and a third colour. Logo: your theme’s brand logo, or an image uploaded in the embed; without either, your shop’s name in your font. Font: your theme’s heading font, its body font, or any font from Shopify’s library.

What is never covered

Cart, checkout and account pages, links that open in a new tab, downloads, and in-page jumps. Visitors who ask their device for reduced motion get no motion at all. Firefox loads pages plainly.