Shopify Page Transition
I'm trying to add in a custom page transition to my shopify store. The goal is to have a logo prompt on the center on screen when switching pages. Does anyone have a link to a tutorial or reference regarding this?
9 Replies
Is it a headless shopify store that uses a javascript framework? Or is it built out using Shopify Theme's?
Because if it's Shopify Theme's, it's a SSR site, can't have transitions in between pages
What do you mean by headless? Vanilla HTML/CSS/JS?
I’m currently using a shopify theme. I was able to do simple transitions by adding a fade to the body but it’s not exactly what I’m looking for
Headless as in it's a react or svelte application and it just fetches data from Shopify. At least in the time I've used Shopify, there's no real way to do it without really hurting your website performance scores. Everytime you navigate to a new page, you have to do a page refresh. That's just how it works
And because of that, you'd have to do something like delay exiting the page when you navigate away or delay entering the page when you navigate to a new page
Google would heavly penalize that for CLS.
Probably not worth losing site score over
Ah okay. Thank you for the feedback I really appreciate it
No problem. I love Shopify and it's a great platform, but that's just a limitation of any SSR site, which Shopify happens to use. Great for SEO and google loves it, but you have to be quite specific about how you do things going over. If you have any more questions though, would be more than happy to help 👍
This is still really new but it's trying to overcome the SSR limitation and do what you're looking for. No browser supports it yet except like chrome Beta, but maybe in 6-9 months, you could use this:
https://developer.chrome.com/docs/web-platform/view-transitions/
Chrome Developers
Smooth and simple transitions with the View Transitions API - Chrom...
The View Transition API allows page transitions within single-page apps, and will later include multi-page apps.
Until then though, it won't work for 99% of your website users
How do you find universal browser support for this feature?
Thanks again. First time dealing with Shopify tbh. I’m still relatively new to web development. I have some experience with building websites w/o CMS/page builders. Not the biggest fan of them tbh.
Better support than I thought! They're moving quick I guess.
https://caniuse.com/?search=View%20Transition%20API
I normally dislike them as well, just feel it limits the customization. Shopify did a great job imo though. It was super user friendly so the rest of my team was able to understand it, and liquid was a pretty solid templating language imo. Trying to build an e-comm without something like Shopify would be a nightmare, so I think that'll be my go to platform for anything e-comm related after growing accustomed to it