Shopifyのおすすめ商品を、アルゴリズム任せではなく「自分で選んで表示したい」ときに役立つのがメタフィールドです。この記事では、商品ページごとに手動で関連商品を指定して表示する方法を紹介します。テーマ標準のカード型スニペットで統一感を保ちつつ、運営者の感覚を活かした柔軟なレコメンドを実現できます。
Shopifyには、「recommendations」という独自アルゴリズムを使ったおすすめ商品表示機能があります。
閲覧履歴や販売データをもとに自動で関連商品を提案してくれる便利な仕組みですが、運営を続けていると「この商品を見ている人には、これを見せたほうがアップセル・クロスセル効果が高そう」と感じる場面も多いのではないでしょうか。
そんなときに活躍するのが、メタフィールドを活用した「手動設定型のおすすめ一覧」です。今回は、商品ごとに任意の商品を指定し、テーマデフォルトのカードデザインで美しく一覧表示する方法を紹介します。
(関連記事) 関連商品・おすすめ商品作成に用いられるオブジェクト「recommendations」について
メタフィールドを準備
商品ごとに異なるおすすめ一覧を作成するためには、まずメタフィールドを用意します。
メタフィールド(metafields)は、Shopify内で「各商品に固有の追加データ」を持たせることができる仕組み。テーマやテンプレートでは、同じテンプレートを使う全商品に共通の表示しか設定できないため「この商品ページだけは特定の商品をおすすめしたい」といった場合、テンプレート上で直接制御することは難しいのです。
そこで登場するのがメタフィールド。メタフィールドにおすすめ商品（商品リスト）を格納しておけば、各商品が自分専用の関連データを持つことができます。設定方法もシンプルで、管理画面から「定義を追加」→「コンテンツタイプ」を「商品リスト」にするだけでOKです。
メタフィールド「custom.manual_related」を設定
次に、実際にメタフィールドを作成していきます。管理画面の左下メニューから ［設定］＞［メタフィールドおよびメタオブジェクト］＞［商品］ の順に進み、「定義を追加」をクリックします。
名前には「手動おすすめ商品」などわかりやすいタイトルを付け、ネームスペースとキーにはcustom.manual_related を指定します。
データタイプは「商品」を選択し、デフォルトの「単一商品」ではなく 「商品のリスト」 に変更しましょう。これで複数の商品をまとめて選択できるようになります。
登録後は各商品編集画面の下部にメタフィールド入力欄が表示されるので、そこでおすすめしたい商品を選択して保存すれば設定完了です。
商品ページを確認
メタフィールドを作成したら、実際の商品ページで入力欄が表示されているか確認してみましょう。
管理画面の「商品」一覧から任意の商品を開くと、ページ下部に先ほど作成した「手動おすすめ商品（custom.manual_related）」のフィールドが表示されているはずです。
ここでおすすめしたい商品を複数選択して保存します。リスト形式なので、関連性の高い商品を自由に組み合わせることができます。
設定が完了したら、いよいよ次はコードの実装です。
おすすめ商品一覧のLiquidを作成
メタフィールドの準備ができたら、次はテーマへの実装です。
おすすめ一覧を表示する方法には、大きく分けて二通りあります。
ひとつは「セクション」を新しく作成し、テーマエディタ上で配置できるようにする方法。もうひとつは、既存のテンプレートファイル（たとえば「main-product.liquid」）に直接コードを追加する方法です。
どちらでも目的は同じですが、この記事ではよりシンプルに「コードの実装」に焦点を当て、Liquidでの書き方のみを紹介します。
Liquidコード
{%- assign related = product.metafields.custom.manual_related.value -%}
{%- if related != blank -%}
<ul>
{%- for p in related -%}
<li >
<a href="{{ p.url }}">
{%- if p.featured_image -%}
{{ p.featured_image | image_url: width: 480 | image_tag: alt: p.title, loading: 'lazy' }}
{%- endif -%}
<p>{{ p.title }}</p>
<p>{{ p.price | money }}</p>
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}上記のコードは、非常にシンプルながら柔軟に拡張できます。
たとえば、セール価格を表示したい場合はcompare_at_priceを追加したり、在庫がない場合に「Sold out」バッジを出すにはavailableを使えばOKです。
注目すべきポイントは「product.metafields.custom.manual_related.value」の部分。メタフィールドは特殊なデータ構造を持っており、.value を付けないと「中身の実データ」ではなく、単なる参照情報しか取得できません。
よく後ろに「 | map: ‘id’」を用いてID配列を作るケースもありますが、メタフィールドでは「.value」を使って直接オブジェクト配列を扱うのが正しい方法です。
カード型のスニペットをrenderする
見た目の一貫性を保つには、テーマ標準の「snippets/card-product.liquid」を使うのが最短です。
「render」は、引数を明示してスニペットに値を渡すという構文で、渡し先の変数名＝card_product、渡り値＝ループ中の商品オブジェクト（ここでは p）という形にします。
{%- assign related = product.metafields.custom.manual_related.value -%}
{%- if related != blank -%}
<ul class="product-grid grid grid--2-col-tablet grid--4-col-desktop">
{%- for p in related -%}
<li class="grid__item">
{%- render 'card-product',
card_product: p, # ← 引数名: card_product / 渡り値: p
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
-%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}いかがでしょうか。
今回は、Shopifyのメタフィールドを活用して、商品ごとにユニークなおすすめ商品一覧を手動で作成する方法をご紹介しました。
テーマ標準のカードスニペットを使えば、デザインの統一性も保ちながら運営者の意図を反映した柔軟なレコメンドが可能になります。
アルゴリズム任せでは表現しきれない“人の感覚”をプラスすることで、アップセル・クロスセルのチャンスがぐっと広がります。
ぜひ、あなたのストア運営にも取り入れてみてください。
