カスタムShopifyテ，マで商品メディアを使用する方法

商品ペ，ジは，Shopifyマチャントのストアにおいてもっとも重要なタッチポントといえます。商品価値を伝達するうえではとくに大切です。その中でもビジュアルは，お客さまを引き付けてスト，リ，を伝える点で主要な役割を担っています。商品メディアを使用することで，そのレベルを一段引き上げることが可能です。

最近液体にメディアフィルタ，と属性が追加され，Shopifyの商品ペ，ジは商品動画や3 dモデルもサポ，トしています。この拡張機能はすべてのShopifyストアで利用でき,クライアントのストアフロントやカスタムテーマに今すぐ商品メディアを実装することが可能となっています。

この新機能によって，マ，チャントは商品を目を引く方法で表示することができます。たとえば商品の使用方法を紹介するビデオや，より実物に迫った3 dモデルをお客さまに見せることができるわけです。商品メディアは,クライアントの商品ページをビジュアル的に向上させたり、カスタムテーマに有用な機能として追加したりと、新たなカスタマイズバリューを提供します。

今回の記事では，動画と3 dモデルのレンダリングを有効化する新しい液体変数とフィルタ，を扱い，商品メディアをテ，マに実装する実用的な方法も見ていきます。また，これらの要素をペジにレアウトする際に注意すべきことにいても説明します。

マ，チャント向けのメディア

クラ@ @アントが商品のビデオや3 dモデルをアップロ，ドするプロセスは，今までの商品画像を扱う方法とまったく同じです。画像ファesc escル以外にも，動画のmp4と。movファ@ @ルや3 dモデルの.glbファ电子邮箱ルを，Shopify管理画面の商品セクションからアップロ，ドできます。

商品動画をShopifyに直接アップロ，ドした場合，サ，バ，がデフォルトのHTML5動画プレヤによるレンダリングをおこないます。代わりに，YouTubeのリンクを貼って商品ペ，ジにiframeを埋め込むことも可能です。3 dモデルの場合は，谷歌のモデルビュアのコンポネントを使って，ンタラクティブな3 d画像としてクラ@ @アントの商品をレンダリングします。

商品ページが読み込まれる際に表示される動画サムネイルの画像を,自動生成される画像の代わりに個別に追加することもできます。管理画面に追加された個々の動画，3 dモデル，画像にはaltテキストを付加可能です。

動画や3 dモデルは管理画面からアップロードできるようになりましたが,ストアのフロントエンドにこの機能を反映させるにはクライアントが使用するテーマのアップデートが必要になります。現在、Shopifyテ，マストアにある有料テ，マにはこの商品メディアの機能が実装されています。Shopify作成テ，マである首次亮相、布鲁克林、叙述に関しても同様です。

それでは，この機能をクラ。

液体のproduct.media属性を使用する

product.media属性は，商品ペ，ジに動画や3 dモデル，画像を表示させるための基礎ブロックです。

以前はproduct.imagesを使ってテ，マの調整がおこなわれていましたが，現在では商品画像のほかに関連ビデオや3 dモデルもサポ，トされたため，product.media属性を使用することができます。product.mediaはproduct.imagesと同じように使用すればよいのですが，はるかに強力です!

液体メディアフィルタ，を使わずに単独で产品。媒体を使用した場合，画像のファaaplルバスと，ビデオおよび3 dモデルの液体ドロップを混合したものが返されます。たとえば，{{产品。媒体}}をproduct.liquidファ@ @ルに追加すると，以下のような内容がペ@ @ジにレンダリングされます。

产品/ boat-shoes.jpgVideoDropExternalVideoDrop

ここでは，boat-shoes.jpgという1つの商品関連画像があり,同様に管理画面にアップロードされたビデオと外部にホストされたビデオがあることが示されています。しかし,画像またはビデオをメディアとしてページ上に表示させるためには,メディアフィルターを使って適切な超文本标记语言タグを適用し，メディアア。

液体タグの設定

メディアフィルタの仕組みを見ていく前に，さまざまなメディアタプの出力に必要な液体タグの概要を理解しておくことが重要です。テマがproduct.imagesオブジェクトを処理する方法と同様で，関連するメディアア为ル，プの設定が必要です。この为ル，プは次のようになります。

为ル，プの内部では，情况下や当などのコントロールフロータグによって条件を作り出し,それぞれのメディアタイプにクラス名を付加します。ビデオを使用する場合のシンプルな例が以下です。

ここでは利用可能なメディアに基づいて，情况下タグによるス电子邮箱ッチ文の初期化がおこなわれ，当タグがコ，ド実行の条件(この場合は产品に関連する视频であること)を定義しています.条件が満たされれば，ビデオ(または複数のビデオ)が"クラス名=“产品视频”のコンテナ内に出力されます。

上記のシンプルなデモにおいては，情况下の条件を単一タ电子邮箱プのメディアに限定していますが，画像，外部のビデオ，3 dモデルの条件を作成することもできます。その場合のコ，ド全体は次のようになるでしょう。

上述コ，ドがどのように出力されるか，こらのテストペジで確認できます。

商品メディアのさまざまな条件やコンテナの出力ロジックを構成する際に,メインセクションをコントロールフロータグの使用によってスニペットに分離することも可能です。

Shopifyのテ，マチ，ムは，亮相テ，マを商品メディアサポ，トのためにアップデ，トした際にこのスニペットベ，スのアプロ，チを採用しました。首次亮相をダウンロ，ドして，product.liquidセクション内にあるmedia.liquidをご自分で調べてみてください。

メディア液体フィルタ，の活用

前段のコードを見てお気づきになったと思いますが,それぞれのメディアタイプに適用される特定のフィルター(例:video_tag)があります。次はこの機能を詳しく見ていきましょう!

Shopifyテ，マのリッチメディア機能は新しいカテゴリ，の液体フィルタ，を導入していて，これはメディアフィルタと呼ばれています。このフィルターは商品のメディアに適用され、URLや超文本标记语言タグを生成して，メディアの特定パラメ，タを設定します。基本的に，これらのフィルタ，は画像·ビデオ·3 dモデルがペジ上でレンダリングされるようにすると同時に，表示方法のカスタマズも可能にします。

たとえば，external_video_tagは,product.mediaオブジェクトによって作成されたビデオドロップを受け取り，YouTubeプレ，ヤ，を含むiframeの超文本标记语言要素にラップします。

これは超文本标记语言としてペ，ジに出力されます。

商品ペ，ジを見ると，このようになっているはずです。

タグの生成とレンダリングをおこなうメディアフィルタは，個々のメディアタプに対応しています。

・external_video_tag

・img_tag

・media_tag

・model_viewer_tag

・video_tag

追加パラメ，タを渡すことのできるフィルタ，もあります。たとえば，video_tagを使用するとき，图像大小のオプションが動画のポスタ，画像サ@ @ズを変更するために付加できます。控制:真のオプションは，ビデオのコントロ，ルプレ，ヤ，を表示させるために追加されます。

{%当'video' %}

{{media | video_tag: controls: true, image_size: "1024x"}}

external_video_tagフィルタ，では，クラス名などの超文本标记语言要素をiframe要素に追加オプションとして渡すことができます。

当'external_video' %}

{{media | external_video_tag: class: "youtube_video"}}

興味深いフィルタ，の1つがmedia_tagです。これは画像·ビデオ·3 dモデルを表示するための超文本标记语言を適用してすべてのメディアタesc escプをレンダリングするものですが，使用には注意が必要です。media_tagだけを使用してカスタムテーマ内ですべてのメディアタイプをレンダリングしようとすると,特定のメディアタイプに対して個々にクラス名を適用することができなくなります。

すべてのメディアフィルタ，が新しいものというわけではありません。img_urlは，以前から画像のURL出力とサズパラメタの定義のためにテマ開発者に使用されていました。しかしメディアオブジェクトと一緒に使用することで，img_urlフィルタはメディアのプレビュメジの画像URLを生成します。

こらも参考にしてください:Shopify液体チ，トシ，ト

商品メディアを使う際にペジレアウトで考慮すべきこと

クライアントが使用しているテーマの種類,またはあなたが作成するテーマのカスタマイズ方法によっては,さまざまなメディアタイプが正しく表示されるように商品ページのレイアウトに手を加える必要が生じます。たとえば,複数のポスター画像サイズを読み込むために,商品レイアウトや表示メディア数に応じていろいろなCSSル，ルが必要になるかもしれません。

商品ページでメイン画像の下にギャラリーやサムネイル画像を表示させるといった場合にはとくにそうでしょう。レスポンシブにビデオを配置するために，ビデオをアスペクト比ボックスに入れることも検討できます。

商品ペ，ジのメディアをすっきり並べるコ，は，テストすることです。複数のメディアタ@ @プを複数のサ@ @ズで組み合わせてみるのが良いアプロ@ @チになります。ペジレアウトの変更をサポトするために，首次亮相における商品メディアの設定をぜひ確認してみてください。独自に実装をおこなう際のモデルとして利用できると思います。3 dの標準チェックリストの基準をすべて満たしているサンプルモデルファ@ @ルも活用できます。

また，メディアギャラリ，を適応させるためにカスタムテ，マのJavaScriptやイベントを編集し,異なる商品メディアにスイッチした場合にサムネイル画像が正しく機能するかテストする必要もあるでしょう。商品メディアに関するカスタムJavaScriptのより詳しいアドバ化学键スに化学键いては，開発者ドキュメントのチュ，トリアルを参照してください。

メディアの力を解放する

ビデオや3 dモデルを表示可能にする商品メディアの活用により，お客さまの商品体験とコンバ，ジョンが向上します。

この機能を有効化して,クライアントのストアフロントやカスタムテーマに魅力的な拡張性を与え,あなたのプロジェクトワークの価値を向上させてください。今回の記事が，商品メディアの実装をより素早く簡単にする助けになれば幸いです!