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

商品ページは、Shopifyマーチャントのストアにおいてもっとも重要なタッチポイントといえます。商品価値を伝達するうえではとくに大切です。

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

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

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

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

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

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

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

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

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

それでは、この機能をクライアントのストアやカスタムテーマに組み込む方法を見ていきましょう。

Liquidのproduct.media属性を使用する

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

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

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

products/boat-shoes.jpgVideoDropExternalVideoDrop

ここでは、boat-shoes.jpgという1つの商品関連画像があり、同様に管理画面にアップロードされたビデオと外部にホストされたビデオがあることが示されています。しかし、画像またはビデオをメディアとしてページ上に表示させるためには、メディアフィルターを使って適切なHTMLタグを適用し、メディアアイテムが正しくレンダリングされるようにする必要があります。

Liquidタグの設定

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

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

ここでは利用可能なメディアに基づいて、caseタグによるスイッチ文の初期化がおこなわれ、whenタグがコード実行の条件（この場合はproductに関連するvideoであること）を定義しています。条件が満たされれば、ビデオ（または複数のビデオ）が「クラス名＝"product-video”」のコンテナ内に出力されます。

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

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

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

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

メディアLiquidフィルターの活用

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

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

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

これはHTMLとしてページに出力されます。

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

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

・external_video_tag

・img_tag

・media_tag

・model_viewer_tag

・video_tag

追加パラメータを渡すことのできるフィルターもあります。たとえば、video_tagを使用するとき、image-sizeのオプションが動画のポスター画像サイズを変更するために付加できます。controls: trueのオプションは、ビデオのコントロールプレーヤーを表示させるために追加されます。

{% when 'video' %}

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

external_video_tagフィルターでは、クラス名などのHTML要素をiframe要素に追加オプションとして渡すことができます。

{% when 'external_video' %}

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

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

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

こちらも参考にしてください：Shopify Liquidチートシート

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

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

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

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

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

メディアの力を解放する

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

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

 

原文：Liam Griffin 翻訳：深津望