shopifyコード編集初心者もできる
Dawnのフッターに
動画ブロックを追加する方法

今回はshopifyのDawnテーマのフッターに動画ブロックを追加し、自動再生やループ、コントロールボタンの選択肢と、リンクを付けたくなりました。

順を追ってやり方を共有いたします。

完成イメージ

Dawnテーマのフッターに動画ブロックを追加する方法

全体の流れは以下の通りです。

1. オンラインストア＞テーマの該当テーマの三点ボタンを押して、「コードを編集」を選択
2. 「footer.liquid」を開く
3. htmlとJSONを追記して「保存」
4. オンラインストア＞カスタマイズのフッター箇所にCSSを追記
5. オンラインストア＞カスタマイズのフッター内のブロックで「video block」を選択
6. 以下を設定
   • 動画のリンク
   • 自動再生
   • 消音
   • ループ
   • コントロールボタン
   • リンク先
7. 「保存」

footer.liquidに記載するコード

html追記箇所

以下のコードは、「{%- when ‘image’ -%}」下から始まる「<div>」を閉じている、「</div>」の下、「{%- endcase -%}」の上に貼り付けます。

{%- when ‘video’ -%} <div class="footer-block__details-content footer-block-video"> <a href="{{ block.settings.link_url }}" target="_blank" class="broken_link"> <video {% if block.settings.autoplay %}autoplay{% endif %} {% if block.settings.muted %}muted{% endif %} {% if block.settings.loop %}loop{% endif %} {% if block.settings.controls %}controls{% endif %} playsinline> <source src="{{ block.settings.video_url }}" type="video/mp4"> Your browser does not support the video tag. </video> </a> </div> コピー

JSON追記箇所

「”type”: “image”」を検索し、その直前の「{」にカーソルを合わせて緑色にハイライトされたときに、同様に緑色にハイライトされた「}」の後ろに「,」を入れた後、下の行に以下のコードを追記。

{ “type”: “video”, “name”: “Video block”, “settings”: [ { “type”: “url”, “id”: “video_url”, “label”: “Video URL” }, { “type”: “checkbox”, “id”: “autoplay”, “label”: “Autoplay” }, { “type”: “checkbox”, “id”: “muted”, “label”: “Muted” }, { “type”: “checkbox”, “id”: “loop”, “label”: “Loop” }, { “type”: “url”, “id”: “link_url”, “label”: “Link URL” }, { “type”: “checkbox”, “id”: “controls”, “label”: “Show Controls” } ] } コピー

カスタマイズ＞フッターでカスタマイズCSSを設定

「カスタムCSS」箇所に表示させたいサイズを記述。以下はブロック内に動画を収めるためのコード。

.footer-block-video { max-width: 100%; overflow: hidden; } .footer-block-video video { width: 100%; height: auto; } コピー

カスタマイズ＞フッター内のブロックで動画の再生設定

「フッター」内の「ブロックを追加」をクリックし、「video block」を選択。

動画のURLからリンク先まで設定。

自動再生には「消音」にする必要があります。shopify側で推奨されておらず、実装する場合には、コントロールボタンを表示させて訪問者が操作できる状態にしておくことが望ましいとされています。

また、パフォーマンスに影響を与える場合もあるので要注意。