On most shops every click is the same: the page goes white, and a moment later the next one appears, half built, then settled. Brand sites stopped doing that years ago. A page transition is what happens in between: the old page leaves, something moves, the new page arrives ready. It is the difference between a site that feels made and a site that feels rendered.
Why your theme doesn’t have them
A Shopify theme is a set of pages. Each click asks Shopify for a whole new page, and the browser throws the old one away. There is no moment in that flow where a theme can animate, because nothing of the theme is alive between the two pages. Horizon, Shopify’s 2025 theme, added transitions of its own with a lot of engineering behind them; every other theme in the Theme Store loads pages plainly.
Three ways to add them
1. Edit the theme’s code
A developer can wire a library into the theme, or write one, that catches clicks, fetches the next page and swaps it in with an animation. It works, and you own the result. It also means the theme is now partly a JavaScript app: sections that re-render themselves, the cart drawer, apps that inject scripts and the next theme update all have to be checked against it, and the person who built it has to stay around. For a shop with a developer on retainer this is fine. For most shops it is not.
2. Use Horizon
Horizon ships with transitions and a product photo that flies into its page. If you are on Horizon and like its one look, you already have them. You cannot change the move, and you cannot take it to another theme.
3. Switch on an app embed
An app embed is a piece of an app that runs inside the theme without editing it. You switch it on in the theme editor, under App embeds, and switch it off the same way; the theme’s code is never touched, and uninstalling leaves nothing behind. This is how Segue works. Pick a style in the editor, save, and every page of the shop has it; your logo and your colours are read from the theme, or you set three colours of your own.
What a good one does under the hood
The order matters more than the animation. On a click, a cover closes over the page in your colours. The next page was already being fetched as the pointer reached the link, and it loads while the cover is shut. When the page is ready, the cover opens onto it. The visitor never sees a blank screen, and never sees a page build itself. Cart, checkout and account pages are left alone; a transition there would only get in the way.
What to check before you choose
- Speed. Run Lighthouse or PageSpeed with the transition on and off. A well-built one shows no drop; Segue on Dawn and Horizon shows none, because only the chosen style’s code is sent and the click script is under 9 KB.
- Reduced motion. Visitors who ask their device for less motion should get none. Segue plays nothing for them.
- Browsers. Safari, Chrome and Edge, on desktop and on phones, is the set that matters for a shop. Firefox loads pages plainly.
- The way out. Switch it off and the shop should be exactly as it was.
Three clicks
Install the app, open the theme editor, switch Segue on under App embeds, pick a style, save. The tutorial walks through it with every screen, and the docs list every setting.