Shopifyのおすすめ商品機能「recommendations」を活用しつつ、特定の商品だけを手動で除外するカスタマイズ方法を解説。テーマエディタから簡単に除外商品を設定し、Liquidコードでループ処理を調整することで、不要な商品を柔軟にコントロールできます。アップセル・クロスセルを最適化したい方におすすめの記事です。
Shopifyでは、適切なタイミングでアップセルやクロスセルを行い、関連商品を効果的に提案することが平均注文額の向上に繋がると言われています。
そんな中で便利なのが、Shopifyが提供する自動おすすめ機能「recommendations」。ストアの販売データや商品情報をもとに、関連性の高い商品を自動でピックアップしてくれる優れものです。
ただし、時には「この商品だけはおすすめに出したくない」というケースもありますよね。この記事では、そんなときに役立つ「特定の商品を手動で除外する」ための小技を、Liquidを使ったシンプルな方法でご紹介します。
recommendationsの仕組み
Shopifyの「recommendations」機能については、以前の記事でも仕組みを解説しました。
Shopify Liquid】関連商品・おすすめ商品作成に用いられるオブジェクト「recommendations」について
簡単におさらいすると、Shopifyは顧客の行動データやストア内のさまざまな情報をもとに、関連性の高い商品を自動的に選び出しています。
現在閲覧中の商品や購入履歴などのデータを基に、Product Recommendations APIを通じてリアルタイムに結果が生成・取得される仕組みです。
そのため、「recommendations.products」で表示される商品自体を手動で指定することはできません。では、「除外処理」はどうでしょうか？ 実は、こちらは可能です。この記事では、特定の商品を手動で除外するシンプルな方法についてご紹介します。
カスタマイズ手順
では、いよいよカスタマイズです。編集するファイルは「related-product.liquid」。この中で、Shopifyのrecommendations機能によって取得された関連商品をループ処理で一覧表示しています。該当部分のコードは以下のようになっています。
<ul
class="grid product-grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
role="list"
>
{% for recommendation in recommendations.products %}
<li class="grid__item">
{% render 'card-product',
card_product: recommendation,
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>ちなみに、{% render 'card-product' %} は、各商品のカードデザインを表示するためのスニペットを呼び出している部分です。
ここに少し手を加えることで、「特定の商品を除外」する処理を実現できます。次のステップでは、実際に除外設定を追加していきましょう。
テーマエディタで除外する商品が選択できるようにする
まず、手動で除外する商品をテーマエディタから選べるようにします。
対象セクション（related-product.liquid）のスキーマに、商品選択用の設定を追加。スキーマはセクションファイルの末尾にある “schema” ブロック内の “settings” 配列に追記します。
{
"type": "product_list",
"id": "excluded_products",
"label": "除外する商品",
"info": "ここで選択した商品はおすすめ商品から除外されます"
}この設定を追加・保存すると、テーマエディタの該当セクションに「除外する商品」という入力欄が表示されます。
ここでショップに登録済みの商品を複数選択できるようになり、記事の主旨どおり「おすすめから外したい商品」を直感的に指定できます。
運用担当者がコードに触れずに除外対象を更新できるため、セール時の一時的な除外や在庫調整などにも柔軟に対応しやすくなります。
ループ処理に修正を加える
次に、選択した商品が表示されないようにループ部分を修正します。仕組みはとてもシンプルです。
テーマエディタで選んだ商品（除外対象）のIDを配列にまとめ、その配列に含まれていない商品だけを「unless」を使って表示するようにします。
{% assign excluded_product_ids = section.settings.excluded_products | map: 'id' %}
{% for recommendation in recommendations.products %}
{% unless excluded_product_ids contains recommendation.id %}
<li class="grid__item">
{% render 'card-product',
--中略--
%}
</li>
{% endunless %}
{% endfor %}
</ul>このようにすることで、Shopifyの「recommendations」機能が返したおすすめ商品の中から、テーマエディタで指定した商品だけを除外できます。
アルゴリズムによる自動提案の精度を保ちながら、不要な商品を簡単にコントロールできる点がこの方法のメリットです。
「recommendations」の応用
以前、別の記事で「recommendations」活用・応用シーンについて紹介しておりますので、興味のある方はぜひチェックしてみてください。
