A transition is a brand decision, not a feature. Pick one, keep it, and let it become part of how the shop feels. This guide groups Segue’s fourteen moves by what they are made of, and ends with a suggestion for each kind of shop.
Built around your logo
These hold your mark on screen while the page changes. They suit shops whose logo is the brand.
- Emblem: your logo turns as the page changes.
- Void: the page shrinks away behind your logo.
- 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. Portal needs an SVG logo with more than one piece.
- Stripes, Checkered, Bars and Pulse show your logo while their cover holds.
Curtains in your colours
These are about colour and rhythm. The logo pops in once the cover is shut.
- Wave: coloured layers rise over the page.
- Crystal: slats sweep across, like blinds.
- Curve: a broad brush stroke sweeps the screen.
- Tide: a soft wave washes over the page.
- Stripes: stripes slide down like a curtain.
- Checkered: squares pop in across the screen.
- Bars: bars rise one after another.
- Deck: the page slides away like a card.
With your words
- Letters: the next page’s name, letter by letter, in your heading font.
- Blind: one panel rises with the page’s name at its middle, and drops away to show the next page.
- Deck names the page on its card.
The words come from the page the visitor is going to: a product’s title, a collection’s name. Letters, Deck’s names and the wordmark use your theme’s heading font, its body font, or any font from Shopify’s library.
The one that picks for you
Automatic chooses the move for each click: a product photo flies into its page, a button grows to fill the screen, and anything else gets Wave. It is the right default for a shop with many product clicks, because the photo flight makes the product page feel like a continuation of the card.
A style per destination
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 settings. A shop might use Portal to go home, Automatic for products and Tide for the rest.
Suggestions
- Fashion and editorial: Deck or Curve. Both are slow enough to read as a gesture.
- Minimal brands: Blind or Tide. One colour, one movement.
- Streetwear and bold brands: Stripes, Checkered or Bars. Rhythm and contrast.
- Logo-led brands: Emblem or Portal. The mark is the show.
- Shops with many products: Automatic, so the product photo carries the visitor into the page.
Whatever you choose, set the Speed slider once and leave it. Fifty to one hundred and fifty percent; every move keeps its shape. The colours come from your theme’s buttons, links and colour variables, or set three of your own in the embed. The collection plays every one of them in a real demo shop.