【Shopify TIPS】
ページ遷移をスムーズに。ローディングバー実装の設定例
ページ遷移時のユーザー体験を大きく改善できる、ローディングバーの実装方法です。
ストア内を回遊するリンクをクリックした際に、ヘッダー部分に擬似的なローディングバーを表示します。正確に遷移先のロードを行っているわけではないのですが、リンクに反応していることをフィードバックすることで、ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減します。
◆実装のメリット
・ページ読み込み中の進捗が視覚的に分かり、ユーザーのストレス軽減
・「サイトが固まっている」と誤解される事態を防止
◆具体的な手順
・ヘッダーグループに「カスタマイズされたLiquidセクション」を追加
・ローディングバー用のコードを挿入
