Add smooth transitions between pages in your store with Scale Theme. 6 transition effects, 3 speeds, and View Transitions API support.
Page Transitions
When a visitor clicks a link on a typical Shopify store, there is a "white flash": the current page disappears instantly and the new page takes a moment to appear. This flash is jarring and creates an impression of slowness. Page transitions solve this problem by adding a smooth animation between pages, creating a navigation experience that feels like a native app.
Why enable page transitions?
| Without transitions | With transitions |
|---|---|
| White flash between every page | Smooth, elegant transition |
| Feels like a "slow" site | Feels "fast" and premium |
| Standard web experience | Experience close to a native app |
| Every click = visual disruption | Navigation feels like a continuous experience |
Page transitions are a detail that makes the difference between a "decent" site and a "high-end" one. They create a sense of polish and quality that reinforces visitor trust.
Activation
Page transitions are disabled by default since they are an aesthetic enhancement that isn't necessary for every store.
To enable them:
- Go to Theme settings (gear icon)
- Click on Page transitions
- Check Enabled
| Setting | Type | Options | Default |
|---|---|---|---|
| Enabled | Checkbox | Yes / No | No |
| Effect | Select | Fade / Slide / Scale / Lift / Cover / Crossfade | Fade |
| Duration | Select | Fast / Normal / Slow | Normal |
The 6 transition effects
Each effect creates a different feel when navigating. Here is a detailed description of each with recommended use cases.
1. Fade (Dissolve)
The current page gradually fades out while the new page fades in. This is the most universal and discreet transition.
What the visitor sees: The page appears to "dissolve" into the next one. The current page content becomes transparent while the new content appears over it.
Feel: Smooth, natural, classic, effortless Visual intensity: Low
Ideal for: All stores, recommended default choice, beginner merchants.
2. Slide (Horizontal slide)
The current page slides to the left (or off-screen) while the new page slides in from the right. The effect gives the impression of "turning pages" in a magazine or navigating between screens on a mobile app.
What the visitor sees: Both pages move horizontally at the same time, like a carousel. The current page exits to the left while the new page enters from the right.
Feel: Dynamic, fluid, lateral navigation, mobile app Visual intensity: Medium
Ideal for: Fashion stores, lifestyle brands, stores with a lot of navigation between same-level pages (collection to collection).
3. Scale (Zoom)
The current page shrinks (zooms out) while becoming transparent, and the new page appears at normal size. The effect gives an impression of depth, as if the visitor is "diving" into the new page.
What the visitor sees: The current page seems to move away (become smaller) while the new page takes its place at normal size.
Feel: Depth, immersion, cinematic, modern Visual intensity: Medium to high
Ideal for: Tech stores, innovative products, detailed product pages, landing pages with storytelling.
4. Lift (Rise)
The new page "rises" from the bottom of the screen, progressively covering the current page. The effect feels like the new page is emerging from below.
What the visitor sees: The current page stays in place (or darkens slightly) while the new page slides upward from the bottom of the screen, like a drawer opening or a curtain rising.
Feel: Reveal, discovery, vertical, mobile-friendly Visual intensity: Medium
Ideal for: Stores with strong vertical navigation, immersive experiences, product pages (navigating from collection to product).
5. Cover (Overlay)
The new page slides over the current page, "covering" it completely. Unlike Slide where both pages move, here only the new page moves -- it slides on top of the old one.
What the visitor sees: The current page stays still while the new page slides over it from one side (usually the right). The effect looks like placing one card on top of another.
Feel: Elegant, cinematic, editorial, premium Visual intensity: High
Ideal for: High-end fashion stores, premium lifestyle brands, publishers, online magazines. This is the most "editorial" and immersive effect.
6. Crossfade (Double exposure)
Similar to Fade but with a superposition: both pages are briefly visible at the same time with partial opacity. The outgoing and incoming pages overlap for a moment, creating a "double exposure" effect.
What the visitor sees: For a brief moment, both pages are visible superimposed with partial opacity, like a photographic double exposure. Then the new page takes over.
Feel: Artistic, photographic, dreamy, soft Visual intensity: Medium
Ideal for: Photo galleries, art stores, brands with a strong photographic aesthetic, editorial sites.
Comparing the 6 effects
, Slide (horizontal), Scale (zoom out), Lift (vertical from bottom), Cover (one page slides over), Crossfade (double exposure).)
| Effect | Direction of motion | Pages in motion | Overlap | Intensity |
|---|---|---|---|---|
| Fade | None | Both (opacity) | Yes (brief) | Low |
| Slide | Horizontal | Both | No | Medium |
| Scale | Depth (Z) | Outgoing page | Yes | Medium |
| Lift | Vertical (bottom to top) | Incoming page | Yes | Medium |
| Cover | Horizontal | Incoming page | Yes | High |
| Crossfade | None | Both (opacity) | Yes (extended) | Medium |
Duration
The duration controls the speed of the transition. It affects all effects in the same way.
| Speed | Duration | Description | Feel |
|---|---|---|---|
| Fast | ~200 ms | Near-instantaneous transition | Fast navigation, almost invisible, performant |
| Normal | ~400 ms | Visible but not slow transition | Ideal balance, the effect is noticeable without being intrusive |
| Slow | ~600 ms | Contemplative transition | Immersive, cinematic, for editorial experiences |
at 3 different speeds. The 3 are shown with a time indicator: "~200ms", "~400ms", "~600ms". Ideally as a GIF with a visible timer.)
Duration recommendations by store type
| Store type | Recommended duration | Why |
|---|---|---|
| Fast-paced e-commerce (many pages/products) | Fast | Visitors navigate quickly, the transition shouldn't slow them down |
| General store | Normal | Balanced between aesthetics and speed |
| Fashion / Lifestyle | Normal or Slow | Aesthetics matter, the transition is part of the experience |
| Luxury / Premium | Slow | Each page deserves to be revealed with ceremony |
| Landing page | Normal | Visitors don't navigate between pages often |
Recommended combinations
"Invisible and efficient"
- Effect: Fade
- Duration: Fast
- For: Merchants who just want to eliminate the white flash without drawing attention to the transition
"Modern and professional"
- Effect: Fade or Scale
- Duration: Normal
- For: The majority of stores, a solid balance
"Editorial premium"
- Effect: Cover
- Duration: Normal
- For: Fashion, lifestyle, and magazine-style stores that want a page-flipping navigation feel
"Total immersion"
- Effect: Cover or Lift
- Duration: Slow
- For: Luxury stores, immersive experiences, brand pages
"Artistic"
- Effect: Crossfade
- Duration: Normal or Slow
- For: Galleries, art, photography
Browser compatibility
Page transitions use the View Transitions API, a modern web technology supported by recent browsers.
| Browser | Support |
|---|---|
| Chrome (desktop + Android) | Yes (since v111) |
| Edge | Yes (since v111) |
| Safari (desktop + iOS) | Yes (since v18) |
| Firefox | Yes (since v132) |
| Older browsers | No -- normal navigation without transitions |
Performance impact
Page transitions have minimal impact on performance:
- No heavy extra JavaScript: uses the browser's native APIs
- No library to load: zero external dependencies
- GPU-accelerated: animations are handled by the GPU, not the CPU
- No impact on Lighthouse score: transitions trigger after the page has loaded
FAQ
Do transitions work with third-party Shopify apps?
Yes. Transitions happen at the entire HTML document level, so all page content (including anything injected by third-party apps) is included in the transition.
Can I disable the transition for certain links?
No, transitions apply to all navigations within your store. External links (to other websites) are not affected.
Does it work with the browser's "Back" button?
Yes. The transition also applies when the visitor uses the browser's back button. The effect is the same as for forward navigation.
Should I choose a different effect on mobile?
No, the effect is the same on mobile and desktop. Transitions are optimized to work on both. The Slide effect is particularly natural on mobile since it reproduces the lateral navigation gesture of mobile apps.
Summary
| Decision | Recommendation |
|---|---|
| Enable or not? | Yes, if your brand values the quality of the experience |
| Which effect? | Fade for safety, Cover for wow |
| Which duration? | Normal for most stores, Fast if there's heavy navigation |
| Compatibility? | All modern browsers, graceful degradation |
| Performance? | Zero impact, this is progressive enhancement |
Next steps
- Animations -- Global theme animations
- Animations (design) -- Section-level animations
- Layout -- Page layout and spacing
- Initial setup -- Global settings