Alan Vo

Available for remote roles

Menu
  1. Home
  2. Blog
  3. Performance
  4. View Transitions API for ecommerce catalogues in 2026

Performance

View Transitions API for ecommerce catalogues in 2026

Performance

The View Transitions API for ecommerce is how a catalogue can keep the product image in view while the browser swaps a collection document for a product document. This note is for Magento, Shopify and WooCommerce storefronts I ship, not for a React storefront rewrite.

I am Alan Vo, a Gold Coast web developer. Eighteen years of multi-page catalogues taught me that shoppers remember the tile they tapped. A white flash on the hop to the PDP feels slower than the LCP number. Chrome’s cross-document view transitions guide is the rulebook. This is the store version: when to opt in, how to share one image name, and how not to wreck INP.

Why View Transitions API for ecommerce belongs on collection to product

View Transitions API for ecommerce belongs on collection to product because that hop is the one shoppers repeat, and it is already a same-origin GET between two HTML documents. Home is a mix of campaign and account. Checkout is a form you must not animate. PLP to PDP is a cacheable page with a hero that already existed as a thumbnail. That is the cheap, high-confidence pair.

A cross-document view transition is not a slider plugin. Both pages opt in with CSS. The browser snapshots named elements, holds rendering, then animates old to new. MDN’s View Transition API overview covers SPA updates and MPA navigations. Almost every catalogue I ship is an MPA. You do not call document.startViewTransition() to follow a product link. Shopify’s performance note on cancelling transitions is explicit: that method is same-document only. Passing it a navigation callback gives you a dead cross-fade of the old page, then a normal load with no shared image.

Chrome 126 shipped the cross-document path. Safari 18.2 followed. Firefox still skips the @view-transition block and just navigates. That is progressive enhancement, the same stance I take on Speculation Rules for ecommerce. Same-document transitions became Baseline Newly available after Firefox 144 in October 2025, per Chrome’s 2025 view transitions update. Cross-document support is still Chromium plus Safari. Ship the opt-in. Do not polyfill it with a 40KB animation library.

Their Nibs is a Shopify rebuild I shipped as contract work on an agency team. Published numbers: 31% more conversions, 48% more orders. The lift came from the purchase journey, including collection to product on a phone. View transitions were not that rebuild. They are how I would now keep the tapped garment on screen during the same hop.

View Transitions API for ecommerce testing on a phone and laptop together

How View Transitions API for ecommerce actually works

View Transitions API for ecommerce actually works as an opt-in on both documents, plus optional names on the elements you want to morph. Chrome’s smooth transitions documentation and MDN’s using the API describe the same sequence. For a store you care about three parts: the at-rule, the name, and the two window events.

Put @view-transition { navigation: auto; } in the CSS both the collection and the product templates load. MDN’s @view-transition reference is the CSS side. navigation: auto opts in same-origin push, replace or traverse navigations, not address-bar loads, bookmarks or a reload. Both documents must opt in. The outgoing rule gates pageswap. The incoming rule gates pagereveal. If only the PDP has the at-rule, the collection click is a normal navigation.

Same-origin only. Shopify checkout on a separate host will not transition from the storefront, which is what you want. A market subdomain is a different origin unless you already treat it as one site.

Give the collection tile image and the PDP hero the same view-transition-name. Unique per page. If twelve tiles all use product-image, the browser will not know which snapshot to pair. I set the name just-in-time in pageswap on the clicked card, and again in pagereveal on the matching hero, then clear it after the snapshot so back-forward cache does not leave stale names on the grid. Chrome’s cross-document guide shows that pattern with NavigationActivation URLs. On Shopify the destination is /products/.... On WooCommerce it is your product permalink. On Magento it is the product path, not a layered-nav accident.

pageswap fires on the outgoing document before the last frame. pagereveal fires on the incoming document after it is ready and before first paint. Both expose event.viewTransition when a transition will run. Shopify’s sample listens on window, not on the Navigation API object. Registering elsewhere silently does nothing.

Chrome skips the transition if the navigation takes more than about four seconds. A cold Magento PDP with a 6s TTFB will never animate. Fix cache and the LCP image first. Image formats that improve LCP is the stills work. View transitions cannot rescue a 3MB PNG.

Same-document document.startViewTransition() still has a job for variant swatches, gallery thumbs, and a filter that rewrites the grid without a full navigation. Hyva and Horizon section rendering can use that path. Do not mix it up with the collection link.

Stopwatch and notebook during a speed pass

WordPress 7.0 added view transitions in wp-admin. The 7.0 Field Guide says screens slide when the submenu changes, and only if the OS is not set to reduced motion. Frontend storefront support is still a theme or plugin job. WooCommerce will not opt your shop in.

Production checklist for View Transitions API for ecommerce

The production checklist for View Transitions API for ecommerce is opt in on both templates, name one image, cancel on tap, and skip cart and checkout.

  1. Confirm the hop is same-origin HTML to HTML. Collection to product, yes. Collection to hosted checkout, no.
  2. Add @view-transition { navigation: auto; } to the shared storefront stylesheet, not to a PDP-only file.
  3. Limit the shared view-transition-name to the product image, maybe the title. Do not name the whole card, the mini-cart, and the cookie banner.
  4. Set names just-in-time from pageswap and pagereveal using the destination URL. Clear them after finished or ready so bfcache and the next click stay clean.
  5. Cancel the transition on pointerdown and keydown during both pageswap and pagereveal, as Shopify documents. Use { once: true } so you do not leak listeners.
  6. Skip the transition in pageswap when the destination is cart, checkout, account, login, logout, search with a query, or a Magento filter URL you would not cache.
  7. Honour prefers-reduced-motion: reduce. Either skip, or set animation duration to something like 0.01s. Do not ship a 400ms morph to someone who asked the OS to stop.
  8. Keep the default root cross-fade short, around 200 to 300ms. Long fades feel like a stall when the PDP HTML is already there.
  9. Pair with Speculation Rules on the same tiles if you already prerender. A finished prerender plus a short named-image transition is the combination that feels instant. Rules still exclude cart and checkout.
  10. Test Chrome and Safari on a phone. Confirm Firefox still shops with a normal navigation. Confirm a reduced-motion OS setting skips the animation.

Do not turn this on for every storefront link. Shopify’s good cases are product card to product, gallery, variant image, and collection to product. Their avoid list is forms, checkout, admin, account, and every navigation. I treat that as production policy, not a theme preset. Avoid link rel="expect" blocking="render" unless you have measured it. Chrome’s guide says incremental rendering is the default, and a PDP that waits for #gallery can look smoother in a recording and worse in field LCP.

Compressed product photography on a light table

What breaks View Transitions API for ecommerce

View Transitions API for ecommerce breaks first on INP. Cross-document transitions hold rendering between the old screenshot and the new response. If the shopper taps again during that hold, the click sits until the animation finishes. Shopify cites Chrome’s guidance: cancel with viewTransition.skipTransition() when they interact. I have seen theme demos that look cinematic in a quiet lab and then fail Core Web Vitals on live stores because people mash tiles on a slow 4G hop.

Duplicate view-transition-name values are the second break. Two visible elements with the same name on one page is invalid. A collection grid that stamps hero on every card will not morph the tapped sofa. Name one element, or generate a unique name per handle and pair it on the PDP.

Checkout and account are the third. Animating into a payment field or a login form is motion you did not ask legal or accessibility to review. It also fights autofill and wallet sheets. Keep pay pages on a hard navigation and keep their JavaScript diet as in reduce JavaScript on checkout pages.

Stale names after back is the fourth. The shopper opens a lamp, hits back, and the collection still has product-image on the lamp card. Clear names after the transition. Chrome’s examples wait on finished on the old page and ready on the new one.

Personalised HTML is the fifth. A guest tile that morphs into a logged-in PDP with a different price is a trust bug. Do not transition across cache variants you would not prerender. App embeds, chat, age gates and cookie walls that paint during the hold will cancel or clip the snapshot. If DevTools says the transition was skipped, read the reason before you add more names.

Do not drive a full navigation from document.startViewTransition(). Shopify warns that finished still fulfills when a transition is skipped, so a .catch() fallback on finished is dead code. Only ready rejects on skip.

How to measure View Transitions API for ecommerce

You measure View Transitions API for ecommerce with field INP on collection and product templates, plus a lab pass that clicks during the animation, not with a Lighthouse screenshot of a lone PDP. Interaction to Next Paint is the metric the cancel-on-tap work exists to protect. A pretty morph that adds 400ms to the next tap is a regression.

Checkout on a phone with a simple form

In Chrome DevTools, profile a collection-to-product click with the Performance panel. Interact mid-transition. Compare INP before and after the skipTransition listeners. Shopify’s testing list is the one I use: slow network, keyboard, touch, multiple quick clicks, and a control with the at-rule removed.

On the incoming page, pagereveal with a non-null viewTransition means the opt-in ran. Chrome 142 adds document.activeViewTransition so you do not have to stash the object. Absence on Firefox is expected. Split field LCP on product URLs by navigation type if your RUM allows it. A prerendered activation plus a short named-image transition can show a tiny LCP because paint already happened off-screen. That is not a reason to skip the stills work on cold ad landings. Those sessions never saw the collection.

Watch rage clicks on the first row of tiles. If they rise after you ship the at-rule, the hold is too long or cancel is missing. Watch checkout start rate. If it drops, you accidentally animated a cart or account link.

I do not invent a conversion percentage for a CSS at-rule. Their Nibs published +31% conversions after a storefront rebuild. That figure is journey and theme, not a morph. Use it as the bar for whether collection to product got clearer, not as a promise that @view-transition will move revenue.

Related work on this site

Related work on this site is photography-led catalogues where a shared image name would pay rent. The Their Nibs Shopify rebuild is a fashion storefront whose collection tile is the product. The Skanvi furniture storefront is WooCommerce with large stills, where a sofa card should still be that sofa when the PDP arrives. The Tamannaah Fine Jewellery Shopify Plus storefront is jewellery photography that cannot afford a white flash between grid and hero. All three were contract work on an agency team. I would opt those templates in for collection to product only, cancel on tap, and leave checkout on a normal navigation.

FAQ

Does the View Transitions API for ecommerce replace Speculation Rules?

The View Transitions API for ecommerce does not replace Speculation Rules. Rules fetch or prerender the next HTML. Transitions animate the swap you already paid for. Use document-rule prerender on product links, then a short named-image transition when that document activates. Exclude cart and checkout from both.

CDN and hosting notes next to a keyboard

Will the View Transitions API for ecommerce run on Firefox?

The View Transitions API for ecommerce will not run as a cross-document animation on Firefox today. Firefox 144 made same-document transitions Baseline Newly available. Cross-document @view-transition is Chrome, Edge and Safari 18.2 and later. Firefox shoppers get a normal navigation. Do not detect support and then inject a JavaScript animator.

Can I use the View Transitions API for ecommerce on Magento checkout?

You should not use the View Transitions API for ecommerce on Magento checkout, or on Shopify and WooCommerce pay pages. Shopify keeps transitions off forms, checkout, account and admin. Keep the at-rule global if you must, and skipTransition() when the destination is cart, checkout or customer.

How do I turn off the View Transitions API for ecommerce for one click?

You turn off the View Transitions API for ecommerce for one click by calling event.viewTransition.skipTransition() in pageswap when the destination is not a product, or when prefers-reduced-motion: reduce matches. Chrome also documented toggling navigation: none in an injected style block. On a catalogue I prefer skip-by-URL so the opt-in stays in one stylesheet.

Keep reading

Contact if you want this kind of work on a live store.