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

学べること

  • タイトルと行動喚起(CTA)を含む注目動画の表示方法

  • 動画の動作(自動再生、コントロール)のカスタマイズ方法

  • レイアウト、間隔、およびアスペクト比の調整方法

  • セクションの色とタイポグラフィのスタイル設定方法


🧩 セクション概要

Video Spotlight セクションは、補助テキストとオプションのCTAリンクを伴う単一の動画を目立たせるために設計されています。キャンペーン、インタビュー、製品紹介動画に最適で、このセクションは完全にレスポンシブで、自動再生または手動コントロールをサポートします。


セクションの追加方法

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

  2. を選択 ビデオスポットライト

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


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

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

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

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

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

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

💡 ヒント:最適なパフォーマンスのために短い動画(10MB未満)を .mp4 形式で使用してください。デバイス全体でのパフォーマンスが向上します。


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

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

  • 動画コントロールを表示: 再生、停止、音量、全画面アイコンを表示するには有効にします

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

    • ギャップありのフル幅

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

    • コンテンツ幅(内部コンテンツに揃える)

  • アスペクト比: 16:9や4:3などの一般的な形式から選択してください

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


タイポグラフィ

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

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

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

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


  • ヘッダーの色: 任意の16進値を選択(例: #000000)

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


スタイリング

  • 角を丸くする: 動画コンテナのボーダー半径を調整


間隔

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

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

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

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


ヘルプが必要ですか?

最終更新