たとえば、「販売元(vendor)」が「Nintendo」の商品だけを抽出したい場合は、以下のように書きます。
-本文中

(最終更新 2025年07月27日)

【Shopify Liquid】オブジェクトの絞り込みに用いる「where」フィルタとは

ShopifyのLiquidテンプレートで頻出する「where」フィルタは、オブジェクトの配列から特定の条件に一致する要素を絞り込むのに便利です。「first」や「last」を使えば先頭や末尾の要素を簡単に取得でき、「sort」や「map」などと組み合わせればより柔軟なデータ操作も可能です。

Shopifyでテーマをカスタマイズしていると、よく目にするのが「Liquidフィルタ」という存在です。これは、オブジェクトのデータを整形したり、特定の条件で絞り込んだりする際に欠かせない機能のひとつ。

中でも、特定の条件に一致するアイテムだけを取り出したいときに使われるのが「where」フィルタです。たとえば、「タグが◯◯の記事だけを表示したい」といった場面では、このフィルタが大活躍します。

今回は、そんな便利な「where」フィルタの基本的な使い方と、つまずきやすいポイントについて、わかりやすく解説していきます。

「where」フィルタ

「where」フィルタは、オブジェクトの中から特定のプロパティ(キー)に指定した値を持つ要素だけを取り出すときに使います。

このとき返されるのは配列形式のデータなので、そのままループ処理(for文)で出力することも可能です。

たとえば、「販売元(vendor)」が「Nintendo」の商品だけを抽出したい場合は、以下のように書きます。

{% assign nintendo_products = collection.products | where: 'vendor', 'Nintendo' %}

このように書くことで、collection.productsの中から「vendor」が「Nintendo」である商品だけがnintendo_productsという配列に格納されます。あとは、この配列をfor文でループすれば、Nintendo製品だけのリストを簡単に作成できます。

他の使用例

用途 Liquidコード 説明
特定のベンダーの商品を抽出 collections['all'].products | where: 'vendor', 'Nintendo' 販売元が「Nintendo」の商品だけを配列で取得
特定のタグを持つ記事を抽出 blog.articles | where: 'tags', 'イベント' ※注意! tagsは配列のため、うまくマッチしない場合あり
在庫があるバリエーションだけを抽出 product.variants | where: 'available', true 在庫があるバリエーション(variant)だけを取得
公開されているブログ記事 blog.articles | where: 'published', true 非公開記事を除外し、公開中の記事だけを取得
カスタムメタフィールドで絞り込み collection.products | where: 'metafields.custom.flag', 'true' カスタムメタフィールド「flag」が true の商品のみ抽出(要Liquid対応)

付随でよく使わっる「first」と「last」フィルタ

「where」フィルタで条件に合う要素を配列として取り出したあとは、さらにその中から最初または最後の要素だけを取得したいケースもよくあります。

そんなときに便利なのが「first」フィルタと「last」フィルタです。

{% assign nintendo_product = collections.products | where: 'vendor', 'Nintendo' | first %}

<p>最初に見つかったNintendo商品:{{ nintendo_product.title }}</p>
{% assign sony_product = collections.products | where: 'vendor', 'Sony' | last %}

<p>最後に見つかったSony商品:{{ sony_product.title }}</p>

他にも以下のフィルタも「where」と組み合わせて使われることが多い便利なツールです。

  • sort: 配列を特定のプロパティで昇順に並べ替える。
    例:products | sort: 'price' → 商品を価格の安い順に並べ替え
  • reverse: 配列の順序を反転させる。
    例:products | reverse → 配列の順番を逆にして取得
  • map: 配列内の特定のプロパティ値だけを取り出して、新しい配列を作成する。
    例:products | map: 'title' → 商品タイトルだけの配列を作成

いかがでしょうか?「where」フィルタは、Liquidにおけるデータ操作の中でも非常に便利な存在ですが、すべてのケースにマッチするとは限らず、とくに配列プロパティへの適用には注意が必要です。

正直なところ、私自身はこのフィルタを積極的にアレンジして活用するというよりは、テーマやデフォルトテンプレート内の記述を読み解くための理解にとどめていることが多いです。

とはいえ、基本的な使い方を押さえておけば、テーマのカスタマイズや修正の際に大きな助けとなるのは間違いありません。

皆さんもぜひ、自分に合った使い方で「where」フィルタを取り入れてみてください!

初めまして。運営者ホリと申します。

当ブログは「Shopifyを一緒に悩んで楽しむ仲間」に向けて情報を発信するブログです。

ここで扱うテーマは、構築やカスタマイズにとどまらず、SEOマーケティングやロジスティクスといった運営全般に広がります。

中でも最も重要視するのは、Shopifyを使った構築や運営に携わる中で「大掛かりな開発と投資に頼らなくても目的を達成できる工夫」。

確かな知識と経験を土台にしながら、日々の学びを記事にまとめて、同じように試行錯誤している方々とシェアしています。 日々の実践から得た知見を記事にまとめることで、Shopifyを使う仲間たちの小さなヒントや発想のきっかけになればうれしいです。

「ちょっと聞いてみたい」「これで大丈夫?」といった気軽な相談も大歓迎です。 Shopifyを通じて一緒に試行錯誤しながら、学び合える場として、このサイトを活用していただければ幸いです。

このブログと運営者について

お問い合わせ

BLOG More

Liquid

3日前

【Shopify小技】PCとスマホで違うメニュー構成にする簡単な方法

「linklists.mobile-menu.links」ではなく「linklists['mobile-menu'].links」のようにブラケット記法で記述するのが安全..

Liquid

1週間前

【Shopify小技】メタフィールドで解決!商品ごとに手動でおすすめ一覧を作成

メタフィールドでは「.value」を使って直接オブジェクト配列を扱うのが正しい方法です。..

Liquid

2週間前

【Shopify小技】関連・おすすめ商品(recommendations)から特定の商品を手動で除外する

テーマエディタで選んだ商品(除外対象)のIDを配列にまとめ、その配列に含まれていない商品だけを「unless」を使って表示する..

設定

3週間前

【Shopify豆知識】テーマレイアウトをカスタマイズしたい?なら「grid-template」を知っておくべき

「スマホではロゴを左側に、PCではロゴを中央に」といった調整も、「grid-template」の設定次第で柔軟に実現できます。..

Liquid

1か月前

【Shopify小技】PC版に左のサイドバーを設置!まず「theme.liquid」の構造を知ろう

もし「type」を設定しなかったり、誤って設定したりしてしまうと、Shopifyはそのセクションをどの領域に表示すべきか判断できません。..

設定

1か月前

【Shopify小技】商品ページごとのFAQをメタオブジェクトで実装してみた

実際には「ピックアップ可能な店舗情報」や「割れやすい商品の配送注意点」など、商品ごとに異なる補足情報‥..

Liquid

2か月前

【Shopify Liquid】テーマで実際使用される「render」の引数と渡り値 その役割を解説

それぞれの変数の意味を押さえておけば、ある程度は読み解くことができると思います。..

アプリ

2か月前

【Shopifyアプリ】シンプル&レスポンシブ!直感的に使えるカレンダー「The Shop Calendar」でイベント・営業日を表示

The Shop Calendarは、カレンダー形式・一覧形式に加え、現在(2025年9月時点)β版としてアコーディオン形式にも対応しています。..

アプリ

2か月前

写真ギャラリーが複数作成できる!Shopify無料アプリ「GA Image Gallery」

ただし、「Advanced Setup」の方は動画を見ても最初はすんなり理解しづらいかもしれません。..

SEO

3か月前

【Shopify豆知識】だからSEOに強いのか!構造化データ(JSON-LD)について解説

しかし実際には、検索結果やGoogleショッピングにおいて、価格や在庫、バリエーション情報を正しく表示するための大事な役割を担っています。..

Liquid

3か月前

【Shopify豆知識】スキーマ設定(JSON)「t:」から始まる文字列とは‥実は変数パスではない?

Shopifyは「"t:"」以下のパスをたどって "label" の値(ここでは「クマさんのお顔」)を取得し、テーマエディタ上で表示します。..

Liquid

3か月前

【Shopify Liquid】スニペットファイルを呼び出す「render」引数と渡り値とは?

この仕組みによって、スニペットは渡されたデータに基づき、表示ロジックに沿って商品画像や商品名、価格などを表示できるようになります。..

制作アイディア

3か月前

Shopify構築をフリーランスへ代行依頼する手順(1~6)と選ぶポイント

私自身の体験としておすすめしたいのが「電話対応ができるフリーランス」を選ぶことです。..

制作アイディア

3か月前

Shopify構築をフリーランスへ依頼するメリットは費用だけではない!課題点も紹介

その「必死さ」や「ファイティングスピリット」は、柔軟かつ誠実な対応として依頼主にとって大きな安心材料となることも..

制作アイディア

3か月前

【リアルレポート】Shopify構築をフリーランスに依頼する際の相場と費用内訳

ECストアは今や単なる販売ツールではなく、実店舗と同じ、あるいはそれ以上に重要性と存在感を持つものとなっています。..

Js

4か月前

Shopifyにおける「カート追加」の仕組みを理解する!form送信 vs fetch API活用

fetch APIに用いられる「/cart/add.js」は、form送信の「/cart/add」と同様、「仮想的なエンドポイント」になります。..

Js

4か月前

【JavaScript】Shopify「cart.js」を読み解くための「Webコンポーネントメソッド」一覧

商品数や金額といった情報は、HTMLの「data-attribute」を使って要素ごとに管理されており、JavaScript側でそれを読み取って処理‥..

Js

5か月前

Shopifyのカスタマイズに役立つJavaScript「配列メゾット」11選を初心者向けに解説

「2005年新着!夏の水着一覧」という配列があるとします。最安値順に並び替えたいとき、「.sort()」というメソッドを使えば‥..

Js

5か月前

ShopifyではLiquidがあるのになぜJavaScriptが多用されるの?

その理由を一言で言えば、「Liquidは表示前、JavaScriptは表示後に働くから」です。..

Liquid

5か月前

Shopify 関連やおすすめ商品リストが自動生成「recommendations」活用・応用シーン

しかしカートページには、そもそも表示中の商品が存在しないため、このレコメンドの仕組みが機能しないのです。..

Liquid

5か月前

【Shopify Liquid】関連商品・おすすめ商品作成に用いられるオブジェクト「recommendations」について

このオブジェクトは、顧客の行動やストア内でのさまざまなデータを基に、自動的に関連商品を選出します。..

SEO

5か月前

Google、AIモードの導入を発表!収益減少が懸念される中、最も有力なマネタイズとは

このホテル、評価高いし、割引ついてるよ。数ステップで簡単に予約できるけど、今やる?..

SEO

5か月前

AI時代のSEOはオワコン?その真実と「違います」と言える4つの理由

たとえば「近くのコンビニを教えて」といったシンプルな質問に、毎回AIが複雑な推論や自然言語生成をしていたら、とんでもないコストになります。..

設定

5か月前

【Shopify豆知識】ヘッドレス(Headless)ってなに?

少し不気味で怪談を連想させるような響きですが、実際にはShopifyのメリットとして注目されている仕組みのひとつです。..

Liquid

5か月前

【Shopify小技】商品の「カートに追加」の仕組みをシンプルに解説(サンプルコード))

この仕組みにはLiquidだけでなく、JavaScriptやAjax、さらにはサーバー側で動くRubyなど、複数の技術が関わっている..

Liquid

6か月前

カートのノーティフィケーションやドロワーで1注文での同時購入を防ぐ方法は可能?

ノーティフィケーション(画面上部に一瞬表示される通知型カート)については、やや難易度が高めです。..

Liquid

6か月前

【Shopify Liquid】カート内で1つの注文に同時購入を防ぐシンプルな方法

ここで使われているのが、Liquidでよく用いられる「フラグ(真偽)」という考え方です。..

STORY

6か月前

なぜ鳥の巣はあんなに頑丈なのか?成功における「うまくいかない瞬間」の重要性

鳥の巣の初期段階のように、私たちの挑戦も、最初は失敗と不安定の連続です。..

Liquid

6か月前

【Shopify Liquid】商品ページの「オプション」を色か画像にしたい

そもそもShopifyの商品オプションに画像や色を登録できるのか?..

STORY

6か月前

現代言語哲学の巨人が教えてくれた「失敗する人の口癖」とは

あの時もし、あの会社に転職していたら・・..