Shopifyのメタオブジェクトってなに？【後編】Liquidコード編集によるカスタマイズで表示を拡張する方法

皆様のストアはお客様が知りたいと思う情報やストア側がお客様に知って欲しい情報を提供できていますか？
様々な情報を提供することでストアを訪れたお客様に対するアプローチの角度も広がり、結果としてカスタマーエクスペリエンスの向上、エンゲージメントの向上に繋げることができます。

前回の記事では、Shopifyのメタオブジェクトを使用した表示のカスタマイズについて「メタオブジェクトとは」という内容から実際にメタオブジェクトを作成し表示させる方法についてお伝えしました。

前回記事のサマリ

• メタオブジェクトとは？

• メタフィールドとの違い

• 制作者（Creator）というオブジェクトを定義する

• エントリーを追加する

• 作成した制作者エントリーの個別ページを作成する

• 作成した制作者エントリーの一覧ページを作成する

前回は全てノーコードで実装をしました。
今回は後編として少しだけコードを編集してさらに表示を拡張する方法についてご説明します！コードを触ったことがないという方も大丈夫！ステップごとにお伝えいたします。

今回の記事は、前回の記事内で作成したものを元に表示を拡張していきますので前回の記事をまだ読んでいない方は、ぜひそちらからご確認ください。

まだこのセクションはノーコードです！

このセクションでやること

• 商品メタフィールドを使い商品に制作者を紐づける

• 制作者を表示させる商品ページのテンプレートを作成する

• 商品の表示テンプレートを変更する

  作業するページ： 設定→カスタムデータ  

メタフィールドの定義から、商品を選択し「定義を追加する」をクリック

名前を入力し、リファレンスチェックで「メタオブジェクト」を指定→その後すでに作成済のCreatorメタオブジェクトを選択、「1件のエントリー」を選択し保存します。

  作業するページ： Shopify管理画面→左メニュー→商品管理→該当の商品ページ  

制作者を紐づけたい商品を選択し、下にスクロールします。すると先ほど作成したメタフィールド「creator」が表示されているのを確認できます。

そちらの欄で紐づけたい制作者を選択し、保存します。

※すでに制作者のメタオブジェクトエントリーが作成されていることが前提です。
方法については前編記事をご覧ください。

  作業するページ： Shopify管理画面→左メニュー→オンラインショップ→利用中テーマの「カスタマイズ」 

カスタマイザの上部「ホームページ」と記載のある箇所から「商品」を選択、次に「テンプレートを作成する」を選択します。

管理用で分かりやすい名前を設定し、テンプレートを作成します。

「セクションの追加」から、テキスト付き画像を選択しページに追加します。
（今回はテキスト付き画像を選択していますがご希望に合うものであればセクションは何でも大丈夫です）

テキスト付き画像の「動的ソースを接続」アイコンから、creatorを選択、imageを選択します。

同様に見出しに名前、テキストに説明文を設定します。

ボタンのリンク先も制作者の個別ページとなるように設定しましょう。

ここまで完了すると商品ページに制作者情報を表示することができました！

少し手間に感じる…？メタフィールドを商品に設定して表示するだけでよいのでは…？もしかすると最初はそう感じるかもしれません。

しかし、 メタオブジェクトを使う大きなメリットがあります！ 
今回例として作成しているJohn Doeさんの作品がストアに50点出品されていると仮定します。そこでJohnさんの説明文を変更する際、メタフィールドを使用している場合は50商品全てでメタフィールドの値を変更する必要があります。

とってもめんどうですよね…商品が100点200点それ以上もあったら…その手間を想像するだけで疲れてしまいます。

メタオブジェクトを使用していれば、 メタオブジェクトのエントリーとして作成しているJohnさんの情報を変更するだけで、50点全ての商品情報が同時に変更されます ！

余談ですが、エンジニアの世界には「 Don’t repeat yourself 」という言葉があります。
コードの中で同じ記述を様々な場所に繰り返し書かない（そのような仕様にしてはならない）という意味が込められています。

メタオブジェクトの使い方に通ずる部分があるな、とエンジニアの私は感じています。

前のセクションでは商品ページに制作者の情報を表示させる方法についてお伝えしました。
今回はその逆、制作者個別のページに該当の商品一覧を表示させてみましょう。

このセクションでは少しだけLiquidコードを編集します。分かりやすくご説明しますので、ステップごとにぜひやってみてくださいね。

このセクションでやること

• 制作者のメタオブジェクトエントリーに商品を追加する

• 制作者の個別ページに商品一覧を表示させるためのセクションを作る

• 制作者の個別ページにセクションを追加する

  作業するページ： 設定→カスタムデータ→メタオブジェクトの定義→Creator 

すでに作成済みのCreatorというメタオブジェクトを選択し、フィールドを追加ボタンから「商品」を選択します。

名前を入力し、「商品のリスト」を選択します。
ここで名前の下に表示される「キー」は後から必要になるので覚えておきましょう。（覚えなくても後で確認することができるのでご安心を！）

設定が終わったら保存します。

  作業するページ： Shopify管理画面→コンテンツ→メタオブジェクト→Creator 

すでに作成しているエントリーを開き、先ほど追加したproductに対象商品を設定します。

制作者の個別ページにこのような形で対象商品を表示させたい！
なのですが、 カスタマイザから「特集コレクション」を挿入してもメタオブジェクトのエントリーに設定されている商品の一覧は表示されません …ということでここからは少しだけLiquidコードを触っていきましょう。

形はこのまま「特集コレクション」を生かし、制作者の商品一覧を表示させるように編集していきます。

  作業するページ： Shopify管理画面→オンラインストア→コードを編集 

現在利用中のテーマの「コードを編集」をクリックします。
テスト目的なので現在のテーマを編集したくない場合は「複製」を選択し、テーマライブラリー内に複製されたテーマのコードを編集しましょう。

sectionsフォルダの中にある「新しいセクションを追加する」をクリックし、任意のファイル名を入力して「完了」をクリックします。

作成されたファイルは一旦そのままにしておきます。

コードの中から「featured-collection.liquid」を探すか検索ボックスから探し、対象のコードを表示させます。

featured-collection.liquidの中のコードを全てコピーし、手順①で作成したcreator-products.liquidに全て貼り付けます。

作成した際にデフォルトで入っている数行のコードに上書きしてしまって大丈夫です。

名前を変更します。
コードの行数はテーマやバージョンにより異なる場合があります。
schemaのすぐ後のname、endshemaのすぐ前のpresetsの中のnameを変更しましょう

for product in section.settings.collection.products 

と書かれている箇所を

for product in metaobject.product.value

と書き換えます。

コード編集はたったのこれだけです！後は右上の保存ボタンを押してコード編集画面は終了しましょう。

簡単にこの部分が何をしているのかを説明します。
この箇所は与えられた商品一覧からひとつずつ商品情報を取り出し、その商品情報をもとに商品名を表示させたり写真を表示させたりする、という動きをしています。

この「与えられた商品一覧」とういう部分が、 featured-collection.liquidの場合はコレクションリスト だったため creator-products.liquidではメタオブジェクトの中のproductの中の値 となるように書き換えを行いました。

コード編集お疲れ様でした！次は先ほど作成したセクションをページに埋めていきます！

  作業するページ： Shopify管理画面→オンラインストア→カスタマイザ 

カスタマイザ画面上部の「ホームページ」とある箇所をクリックし、一番下の「Creator」を選択します。
（前編の記事で作成したものです）

左カラムのセクションを追加をクリックすると…先ほど作成した「Creator's Products」がありますね！そちらをクリックし、ページの任意の場所に表示させます。

すると、該当の制作者に紐づけられた商品が一覧で出力されました！

見出しを変更します。（コード編集でも変更可能です）

「動的ソースの接続」アイコンから、Creatorのnameを選択します。名前だけだと寂しい場合は「’s collection」と後につけてみてもいいかもしれません。

出来上がったページがこちらです！Johnさんの紹介の下に、Johnさんの制作物一覧が並びます。ページ回遊率も上がり、コンバージョン向上にも役立ちます。

作業お疲れさまでした！前編からの成果をまとめると

• 制作者一覧ページを作成

• 制作者個別ページ作成 商品一覧表示

• 商品ページに制作者情報を表示

この3つを実現することができました。

Eコマースストアでは対面販売と異なりどうしても情報が一方的になってしまいますが、Shopifyはカスタマイズ性が大変高いEコマースプラットフォームです。お客様に楽しんでお買い物いただけるよう自由にカスタマイズして様々な情報を提供しましょう！

ただし「カスタマイズ性が高い」ということはどうしても一定の知識が必要になってきます。今回の記事と前回の前編をご覧にいただけたらメタオブジェクトを使用した表示の拡張を体験いただけると思いますが、やっぱり少し難しい、社内にリソースがない、最低限は実現できたがもっとカスタマイズしたい！などのお悩みがありましたらぜひGO RIDEへお問い合わせくださいませ。

皆様のストアがお客様にとって楽しいショッピング体験となるようお手伝いをさせていだきます！