おすすめ商品に表示させたくない商品がある

Topic summary

無料テーマSenseで「Search & Discovery」アプリを使用し、おすすめ商品を自動表示する際、ラッピングなどの有料オプション商品を除外したいという相談。

実施した対応:

  • 非表示にしたい商品に「非表示」タグを付与
  • related-products.liquid{% unless recommendation.tags contains "非表示" %}コードを追加

発生した問題:

  • おすすめ商品を4つ表示する設定なのに、3つしか表示されない
  • 非表示商品の分が抜けて、設定個数に満たない状態

提案された解決策:

  1. 表示数を5に増やして最終的に4つ表示する
  2. 除外用タグがないループ回数を計測し、4回に達した時点でbreakを実行
  3. 手動設定による方法も選択肢として提示

結果:
ループ回数計測とbreak実行の方法で問題解決に成功。手動設定を避けられたことで、商品数が多い場合にも対応可能となった。

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.

無料テーマのSenseで、公式アプリの「Search & Discovery」を利用し、おすすめ商品を自動生成で表示させています。

有料オプション用に登録してある「ラッピング」などの商品を、おすすめ商品の欄に表示させないようにしたく、非表示にしたい商品に「非表示」のタグをつけ、related-products.liquidの38行目&48行目に下記のコードを追加しました。

{% unless recommendation.tags contains "非表示" %}
・
{% endunless %}

おすすめ欄に表示されないようにはできたのですが、おすすめ商品を4つ表示するように設定してあるのが、3つしか表示されません。

非表示の商品の分が抜けてそうなっていると思うのですが、設定した個数を表示するにはどうしたらよいでしょうか。

related-products.liquidのコード全文は以下の通りです。


{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

{% schema %}
{
  "name": "t:sections.related-products.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.related-products.settings.paragraph__1.content"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "You may also like",
      "label": "t:sections.related-products.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 4,
      "label": "t:sections.related-products.settings.products_to_show.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.related-products.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "header",
      "content": "t:sections.related-products.settings.header__2.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.related-products.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.related-products.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.related-products.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.related-products.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.related-products.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.related-products.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.related-products.settings.show_rating.label",
      "info": "t:sections.related-products.settings.show_rating.info"
    },
    {
      "type": "header",
      "content": "t:sections.related-products.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.related-products.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.related-products.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.related-products.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

表示数を1つ増やして5にし、最終的に4つ表示する形にすればよいかなと思います。

試作していませんが以下のような方法が考えられます。

  • limitを設定し、除外用タグが含まれていればlimitを5に、それ以外はlimitを4にする
  • 除外用タグがないループの回数を計測し、ループ回数が4になった時点でbreakを実行する

[参考]

https://shopify.dev/docs/api/liquid/tags/iteration-tags

https://shopify.dev/docs/api/liquid/tags/break

https://webutubutu.com/webdesign/9748

※上記は私のブログ記事ですが、こちらのサンプル1のコード内にあるloopnum1やloopnum2がループ回数計測の一例に該当します

こちらも試作していませんが、候補10件を手動設定する方法でよいならば以下ページ内のShopifyスタッフの回答でも対応できると思います。

https://community.shopify.com/post/1520459

以上ですが、記載した方法では対応できない場合は申し訳ありません。

他方、liquidの読み書きが難しい場合はエキスパートやパートナーに依頼されることをお勧めします。

1 Like

Jizo_Inagaki様

ご返信ありがとうございます。

除外用タグがないループの回数を計測し、ループ回数が設定した表示数になった時点でbreakを実行する方法で実現できました。

商品数が多いこともあり、できれば手動設定を避けたかったため大変助かりました。

たくさんのヒントをご提示くださりありがとうございました。