Designed page transitions and preloaders for your theme. Your logo, your colours, no code.
Designed moves
for your shop
Page transitions and preloaders for any Shopify theme.
Your logo, your colours, no code.
#01
Transition · Wave/ 23
Drag or click to explore the collection
#01
Segue, in a sentence
A Shopify app that gives any theme designed motion: a cover closes on every click, the next page loads behind it, and it opens once the page is ready.
Never a blank screen. Fourteen transitions and nine preloaders, each measured from a reference, built around your logo and your colours. Switched on in the theme editor.
Segue
StyleEmblem
ColoursAutomatic
Show your markOn
Set up in the theme editor: switch it on, pick a style, save. The preview replays on every change.
Built for every Theme Store theme
& tested on Dawn, Horizon and Pitch
WaveCrystalEmblemDeckLettersCurvePulseStripesCheckeredVoidBarsTideBlindPortalSpin: two big lines trade placesSquash: your words stretch and flipCapsule: a glowing pill with your logoBricks: bars build your logoPixel: blocks build your logoBlueprint: your logo drawn like a sketchTwirl: your logo spins next to your nameStatus: a ring turns into an “Online” pillBloom: your logo grows out of a dotWaveCrystalEmblemDeckLettersCurvePulseStripesCheckeredVoidBarsTideBlindPortalSpin: two big lines trade placesSquash: your words stretch and flipCapsule: a glowing pill with your logoBricks: bars build your logoPixel: blocks build your logoBlueprint: your logo drawn like a sketchTwirl: your logo spins next to your nameStatus: a ring turns into an “Online” pillBloom: your logo grows out of a dot
23 moves today.
Built around your logo.
Zero setup
Switch it on in the theme editor, pick a style, save. Nothing in your theme’s code is touched.
Your colours
Read from your theme’s buttons, links and colour variables, and from your logo. Or set three of your own.
Your logo
The mark the moves are built around: your brand logo, an uploaded one, or your shop’s name in your font.
Never blank
The next page loads behind the cover and opens once its fonts and photos are ready. Cart and checkout are left alone.
Meet the smart details that make it feel designed
Automatic mode
Picks the move for each click: a product photo flies into its page, a button grows, anything else gets Wave.
Your mark while it holds
Emblem, Stripes, Checkered, Void, Bars and Pulse are built around it; Wave, Crystal, Curve and Tide pop it in once the cover is shut.
Your heading font
Letters, Deck’s names and the wordmark use your theme’s heading font, its body font, or any font from Shopify’s library.
Once a visit
The preloader plays on the first page of a visit, or only when a visit starts on the home page, and ends when the page is ready.
Portal: your logo is the door
The page leaves into one piece of your SVG logo, the camera pulls back to the whole logo, and flies in through another piece.
A style per destination
One style for links to the home page, one for products, one for collections, one for everything else.
09
The collection: nine preloaders
09
Every preloader
#01 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.
#02 Squash: your words stretch and flip
Your words, stretched across the screen, flip and squash between colours, then stream away.
#03 Capsule: a glowing pill with your logo
A pill with your logo squeezes and stretches into a glowing capsule that opens onto the page.
#04 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.
#05 Pixel: blocks build your logo
Two squares burst into blocks that build your logo, sharpen into it, and leave in bars.
#06 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.
#07 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.
#08 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.
#09 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.
Drag to browse · the one in the middle plays with a sample logo
So, ready to move?
- All 14 page transitions
- All 9 logo preloaders
- Your logo, words and colours
- Speed sliders for both
- Works on any theme, no code
7-day free trial. One plan, Full access, billed by Shopify with your store’s invoice; cancel from your admin at any time.
You may have some questions.Read the FAQ↗Read the FAQ↗
Questions
What does it cost?
One plan, Full access: $10 a month or $100 a year, with a 7-day free trial, billed by Shopify. Every transition, every preloader, every option and every update is in it. Cancel from your Shopify admin at any time.
Does it slow my shop down?
No measurable cost: Lighthouse on Dawn and Horizon shows no drop with Segue on. The embed sends only the chosen style’s code, the click script is under 9 KB, the next page is prefetched as the pointer reaches a link, and it loads while the cover is shut.
Which themes does it work on?
Any Online Store 2.0 theme that supports app embeds, which is every theme in the Theme Store. Tested on Dawn, Horizon (with its own transitions on: Segue takes over the navigation) and Pitch.
Which browsers play it?
Safari, Chrome and Edge, on desktop and on phones. Firefox loads pages plainly. Visitors who ask their device for reduced motion get no motion at all.
Where do the colours and the logo come from?
From your theme: its buttons, links and colour variables, and the brand logo in your theme settings. Or set three colours of your own and upload a logo in the embed.
Can product pages get a different style?
Yes. Under More options: one style for links to the home page, one for products, one for collections and one for everything else, each with its own options.
When does the preloader play?
When a visit starts: opening the store from another site or a typed address, pressing Preview in the theme editor, or reloading a page. Clicking between the shop’s pages does not replay it. In the theme editor it repeats, so changes show at once.
Can I make it faster or slower?
Both embeds have a Speed slider, from 50 to 150 percent. Every move keeps its shape; only its clock changes.
What happens if I uninstall?
Shopify removes both embeds with the app. Nothing in the theme’s code was ever edited, so nothing is left behind.
Can I have a move of my own?
Yes. The studio builds bespoke transitions and preloaders from a reference, with your logo as the door. Write to ocoo.studio@gmail.com.
Behind the app
Segue is made by OCOO Studio, who build Shopify themes where motion is the product. Want a move of your own, from your reference, with your logo as the door? Write to the studio.
The collection: every transition
Explore every transition on a real shop: a product, back to the catalog, home.
Install on Shopify↗Install on Shopify↗#01 Wave
Three coloured layers rise over the page in a wave and lift away on arrival.
#02 Crystal
Bands of slats close over the page like blinds and open again.
#03 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.
#04 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.
#05 Letters
The destination's name, set large in your heading font: rising, falling, fading, zooming, tumbling or typed; solid or outlined.
#06 Curve
A doodle (hook, wave, loop, zigzag, scribble or spiral) is drawn across the page until it covers it; a second erases it.
#07 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.
#08 Stripes
Stripes drop in as a wave (pinstriped, plain, three-colour or wide and narrow); your mark pops in the middle.
#09 Checkered
A board of squares pops in, square by square, your mark in the centre.
#10 Void
The page falls away into the distance; your mark comes forward, and you dive through it.
#11 Bars
Bars, standing or lying, send their leading edges across the screen one after another; a four-square loop holds.
#12 Tide
A sheet with a rough, hand-cut edge rises over the page and carries on to uncover the next.
#13 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.
#14 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.
Drag to browse · the one in the middle plays on a demo shop
Three clicks
Open the theme editor from the app, pick a style, save.
Install on Shopify↗Install on Shopify↗Shopify App Store · early access