プリローダーセクション

学べること

  • サイトが読み込まれる前にブランド化された読み込み画面を有効にする方法

  • 背景、ロゴ、テキストをカスタマイズする方法

  • 表示時間を設定する方法

🧩 セクション概要

プリローダーは、訪問者がストアにアクセスした際に短時間表示されるフルスクリーンの読み込み画面を追加します。これはブランドの見せ方を向上させ、初回ページ読み込み時のユーザー体験をより洗練されたものにするのに役立ちます。

カスタム背景色や表示時間とともに、テキストまたは画像（ロゴなど）のいずれかを表示できます。

プリローダーを有効にする方法

  1. 「 Shopify テーマエディター、開きます テーマ設定

  2. を見つけて展開します プリローダー パネル

  3. をオンに切り替えます プリローダーロゴタイプ （次から選択） テキスト または 画像)

プリローダー設定

プリローダーロゴタイプ

  • テキスト：ブランドまたはテーマ名を表示します

  • 画像：ロゴやアニメーションビジュアルを使用します

プリローダーテキスト

  • 短いタイトルを追加します（例：「Plain Jane 3.0」）

  • をカスタマイズします テキスト色

  • を調整します テキストサイズ スライダーを使用して

💡 ヒント: より視覚的なインパクトを出すには太字または大きなフォントを使用してください

プリローダー画像

  • 静止画像またはアニメーション画像（.GIF や .webp など）をアップロードします

背景色

  • プリローダー画面の背景色を設定します

プリローダー表示時間

  • 画面が表示される時間を制御します（秒単位）

  • デフォルトは1秒；長めの読み込みアニメーション効果にするには増やしてください

利用例

  • あなたの ロゴアニメーション ストアが開く前に表示します

  • プリローダーの 背景を ヒーローセクションと一致させてシームレスな遷移を実現します

  • 「コレクションを読み込み中…」や「Powered by Plain Jane」などブランド化されたテキストを使用します

⚠️ ユーザーのアクセスを遅らせないよう表示時間は短め（1〜3秒）にしてください

スタイリングのヒント

  • プリローダーの 色を ブランドパレットに合わせます

  • テキストは 最小限に抑えます すっきりした見た目のために

  • 軽やかな印象にするには透明または白い背景を使用します

ヘルプが必要ですか？

  • 💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ： [email protected]

  • 💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

前へマーキーセクション次へ商品カルーセルセクション

最終更新