前回の記事で紹介したShopifyの「recommendations」オブジェクトは、顧客の閲覧・購入履歴をもとに関連商品を自動表示する仕組みだ。今回はその活用・応用方法について、カートページでの実装や表示ロジックの工夫を中心に解説していく。
前回の記事では、Shopifyにおける関連商品・おすすめ商品の表示に用いられる「recommendations」オブジェクトについてご紹介しました。
【Shopify Liquid】関連商品・おすすめ商品作成に用いられるオブジェクト「recommendations」について
この「recommendations」は、ストアを訪れた顧客の購入履歴や閲覧履歴をもとに、関連性の高い商品を動的に抽出し、ページ上に表示してくれる便利な仕組みです。
では実際に、抽出されたおすすめ商品「recommendations」を、どのように活用・応用できるのでしょうか？
今回は、具体的な活用シーンとともに、その実装パターンをご紹介していきます。
この商品を購入した人はこちらも
ECサイトでよく目にする「この商品を購入した人はこちらも～」や「一緒によく買われている商品」といった表示も、Shopifyの「recommendations」オブジェクトを活用することで自動的に実現可能です。
これにより、ユーザーの興味関心を引き出し、クロスセルやアップセルの機会を効果的に増やすことができます。
さらに応用として、Liquidの条件分岐を用いれば、特定のタグやメタフィールドを持つ商品に絞ってレコメンド表示を調整することも可能。売上につながる導線を、より意図的に設計することができるのです。
カートページはクロスセルやアップセルの絶好のチャンス
中でも注目すべきは、カートに商品を追加した瞬間です。それはまさに、顧客の「買おう」という気持ちがピークに達している絶好のタイミングです。
この“決意のワンアクション”の直後に、「こちらもおすすめです」とそっと差し出される関連商品。購買意欲の熱が冷めないうちに、欲しかったけれど迷っていたアイテムや、あれば便利な関連商品が目に入れば、自然と「一緒に買っておこうかな」という気持ちが生まれます。
ポップアップやモーダルを活用すれば、この一瞬のチャンスを逃さずクロスセル・アップセルへとつなげ、平均購入単価の向上が期待できます。
カートページに「recommendations」設置の注意点
ただし、ここでひとつ大きな落とし穴があります。Shopifyの「recommendations」オブジェクトは、単体では機能しません。
実はこのオブジェクト、あらかじめ商品データを持っているわけではなく、閲覧中の商品情報などをもとに、Product Recommendations APIを通じてリアルタイムで生成される仕組みです。
この処理を担うのが「<product-recommendations>
では、実際に
基本の形は以下の通りです。
{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id=〇〇〇&limit=〇このうち「{{ routes.product_recommendations_url }}」はShopifyが内部的に用意したAPIエンドポイント。ユーザーがアクセスする“ページ”ではなく、データ取得専用のURLです。
「section_id={{ section.id }}」は、どのセクションテンプレートを使ってHTMLを返すかを指示するパラメータ。そして「product_id=〇〇〇」がレコメンドの基準となる商品ID、「limit=〇で」表示件数を指定します。これらはほぼ定型で、data-urlとしてセットで覚えておくとスムーズです。
この中で特に重要なのが「product_id」の指定です。
というのも、商品ページであれば現在表示中の商品IDが自動で取得されますが、カートページのように“特定の商品が表示されていない”ページでは、product_idが存在しません。
したがって、Liquidなどを使って明示的に「product_id」を指定する必要があります。たとえば、カート内の商品情報から最初の1件を取得し、そのIDをdata-urlに渡すといった工夫が求められます。
複数商品がある場合でも、代表的な1つのIDを基準に「recommendations」を生成することで、ある程度関連性のある提案を行うことが可能になります。
以下のように工夫してみる
では、「product_id」を持っていないカートページように「recommendations」を、「カートに入っている1番目の商品」から「product_id」を取得し、作ってみましょう。
{%- assign base_product = cart.items.first.product -%}
{% if base_product %}
<product-recommendations
class="related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ base_product.id }}&limit=3"
>
{% if recommendations.performed and recommendations.products_count > 0 %}
<ul>
{% for recommendation in recommendations.products %}
<li >
<!--商品のタイトルなど-->
</li>
{% endfor %}
</ul>
{% else %}
<p>おすすめの商品がありません</p>
{% endif %}
</product-recommendations>
{% endif %}①カートに入っている1番目の商品(cart.items.first.product)の変数「base_product」に格納
②data-urlの「product_id」に「base_product」のIDを指定
③「recommendations」を表示
以上、「recommendations」の活用について解説しました。
Shopifyの「recommendations」オブジェクトは、単なるおすすめ商品表示にとどまらず、導線設計や売上向上に直結する強力な機能です。
表示タイミングや出し分けの工夫次第で、顧客体験を損なうことなく自然にクロスセルへとつなげることができます。LiquidやJSと連携しながら、より戦略的なレコメンド活用を実践してみてはいかがでしょうか。
