The first second of a visit is the one you do not design. Someone taps a link in a story, or types your address, and gets a white screen, then a header, then a hero image that pops in late and pushes everything down. A preloader takes that second and gives it to your logo.
What a preloader is, and what it isn’t
It is not a spinner. A spinner says “wait”; a preloader says who you are. The good ones are short pieces of motion built from the logo and a line of words, and they end the moment the page is ready, not after a fixed count. They also hide the one thing a shop cannot fix on its own: the first paint, where fonts swap, images arrive and the layout shifts under the visitor’s eyes.
When it should play
Once. A preloader greets a visit; it must never run between pages. If it plays on every click the shop feels slow, however fast it is. Segue’s rule is simple: the preloader plays when a visit starts, which means the visitor came from another site or a typed address, pressed Preview in the theme editor, or reloaded the page. Clicking from the home page to a product never replays it. There is also a setting to play it only when a visit starts on the home page, for shops that get most of their traffic straight to products from ads.
In the theme editor it repeats on every change, so you see what you set at once.
How long
As long as the page needs. The preloader holds while the shop loads and leaves as soon as it is ready, through an exit that takes the elements away in steps rather than a fade. Both of Segue’s embeds have a Speed slider from 50 to 150 percent; every move keeps its shape and only its clock changes. Keep it quick: a preloader that is loved at one second is resented at three.
Reduced motion
Visitors who ask their device for less motion get no preloader at all. This is not optional, and it is not a loss: the page simply shows.
Nine ways to do it
Every one is built from your logo and your words, in the theme’s colours or three of your own:
- Spin: two big lines trade places letter by letter, with a word or your logo between them, then split open onto the page.
- Squash: your words stretch across the screen, flip and squash between colours, then stream away.
- Capsule: a pill with your logo squeezes and stretches into a glowing capsule that opens onto the page.
- Bricks: a brick unfolds into a column of bars that build your logo, then the logo melts into the page.
- Pixel: two squares burst into blocks that build your logo, sharpen into it, and leave in bars.
- Blueprint: a cursor traces your logo like a pen tool on a blue canvas, colours it, and cuts the canvas open.
- Twirl: your logo spins into place beside your name, spins back, and the page opens through its shape.
- Status: a ring spins around your logo, pops into an “Online” pill, and bursts open onto the page.
- Bloom: a line of type is wiped away by a sweeping bar; a dot blooms into your logo, which flies open onto the page.
Does it cost speed?
No measurable cost. Lighthouse on Dawn and Horizon shows no drop with the preloader on: it is one small script, it draws on a canvas, and it never blocks the page from loading behind it.
Set it up
Install Segue, open the theme editor, switch on the Segue preloader under App embeds, pick a style, save. Your logo comes from the theme’s brand settings, or upload one in the embed. The docs list every setting, and the collection plays all nine.