ビデオスポットライトセクション

学べること

  • タイトルと行動喚起付きで注目のビデオを表示する方法

  • ビデオの動作(自動再生、コントロール)をカスタマイズする方法

  • レイアウト、間隔、アスペクト比を調整する方法

  • セクションの色と書体をスタイリングする方法


🧩 セクション概要

Video Spotlightセクションは、補足テキストと任意のCTAリンクを伴う単一のビデオを強調表示するように設計されています。キャンペーン、インタビュー、製品紹介ビデオに最適で、このセクションは完全にレスポンシブで、自動再生または手動コントロールに対応します。


セクションの追加方法

  1. Shopify テーマエディター、クリック セクションを追加

  2. 選択してください ビデオスポットライト

  3. ページレイアウト内の位置にドラッグしてください


コンテンツとデータの設定

  • ビデオ: ビデオファイルをアップロードまたは選択

  • カバー画像: オプションのフォールバックサムネイル画像(ビデオ読み込み前に使用)

  • ヘッダーテキスト: ビデオの上に表示されるタイトル(例:「ストーリーを見る」)

  • 表示リンクのテキスト: ボタンテキスト(例:「今すぐ見る」)

  • 表示リンクの URL: 商品、ページ、または外部ビデオのリンクを貼り付け

💡 ヒント: パフォーマンスを向上させるため、短いビデオ(10MB未満)を使用してください .mp4 形式は、デバイス全体での最良のパフォーマンスのために推奨されます。


レイアウトと表示オプション

  • 自動再生ビデオ(ミュート): 読み込み時に自動的に再生するにはONにしてください(音声なし)

  • ビデオコントロールを表示: 再生、停止、音量、全画面アイコンを表示するには有効にしてください

  • 幅のスタイル: 次から選択してください:

    • ギャップありのフル幅

    • フル幅(端から端まで)

    • コンテンツ幅(内側コンテンツに合わせて整列)

  • アスペクト比: 16:9や4:3など一般的なフォーマットから選択してください

⚠️ 省電力モードが有効なiPhoneでは自動再生が動作しない場合があります。


タイポグラフィ

  • セクションヘッダーのサイズ:

    • デスクトップ:ピクセル単位で調整可能

    • モバイル:ピクセル単位で調整可能

  • 切り替え セクションタイトルを太字にする および 表示リンクを太字にする 必要に応じて


  • ヘッダーの色: 任意の16進値を選択してください(例: #000000)

  • 背景色: デフォルトは透明です;必要に応じてカスタマイズしてください


スタイリング

  • 角丸: ビデオコンテナのボーダー半径を調整


スペーシング

デスクトップとモバイルで個別に間隔をカスタマイズ:

  • 上下の間隔(デスクトップ)

  • 上下の間隔(モバイル)

各スペーシングオプションは、レイアウトの流れを微調整するために調整できます。


ヘルプが必要ですか?

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

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

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

最終更新