where – Liquid template language

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>where – Liquid template language</title> <meta name="description" content="Liquid filter that selects from arrays."> <meta name="author" content="Shopify"> <meta name="robots" content="index, follow"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="stylesheet" href="/liquid/css/main.css"> <link rel="icon" type="image/png" href="/liquid/images/icons/water-drop-32x.png" sizes="32x32"> <link rel="icon" type="image/png" href="/liquid/images/icons/water-drop-64x.png" sizes="64x64"> <link rel="canonical" href="https://shopify.github.io/liquid/filters/where/"> <link rel="alternate" type="application/rss+xml" title="Liquid template language" href="/liquid/feed.xml" /> <meta property="og:site_name" content="Liquid template language"> <meta property="og:type" content="website"> <meta property="og:url" content="/liquid/filters/where/"> <meta property="og:title" content="where"> <meta property="og:description" content="Liquid filter that selects from arrays."> <meta name="twitter:site" content="Liquid template language"> <meta name="twitter:card" content="summary"> <meta name="twitter:url" content="https://shopify.github.io"> <meta name="twitter:title" content="where"> <meta name="twitter:description" content="Liquid filter that selects from arrays.">  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-49178120-52"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-49178120-52'); </script> </head> <body> <div class="sidebar"> <header class="sidebar__logo" role="banner"> <a href="/liquid/">Liquid</a> </header><nav class="sidebar__nav"> <div class="sidebar__nav-interior"><h3 class="section__header" id="basics-section">Basics</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/basics/introduction/" class="section__link">Introduction</a> </li><li class="section__item"> <a href="/liquid/basics/operators/" class="section__link">Operators</a> </li><li class="section__item"> <a href="/liquid/basics/truthy-and-falsy/" class="section__link">Truthy and falsy</a> </li><li class="section__item"> <a href="/liquid/basics/types/" class="section__link">Types</a> </li><li class="section__item"> <a href="/liquid/basics/variations/" class="section__link">Variations of Liquid</a> </li><li class="section__item"> <a href="/liquid/basics/whitespace/" class="section__link">Whitespace control</a> </li></ul><h3 class="section__header" id="tags-section">Tags</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/tags/control-flow/" class="section__link">Control flow</a> </li><li class="section__item"> <a href="/liquid/tags/iteration/" class="section__link">Iteration</a> </li><li class="section__item"> <a href="/liquid/tags/template/" class="section__link">Template</a> </li><li class="section__item"> <a href="/liquid/tags/variable/" class="section__link">Variable</a> </li></ul><h3 class="section__header" id="filters-section">Filters</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/filters/abs/" class="section__link">abs</a> </li><li class="section__item"> <a href="/liquid/filters/append/" class="section__link">append</a> </li><li class="section__item"> <a href="/liquid/filters/at_least/" class="section__link">at_least</a> </li><li class="section__item"> <a href="/liquid/filters/at_most/" class="section__link">at_most</a> </li><li class="section__item"> <a href="/liquid/filters/capitalize/" class="section__link">capitalize</a> </li><li class="section__item"> <a href="/liquid/filters/ceil/" class="section__link">ceil</a> </li><li class="section__item"> <a href="/liquid/filters/compact/" class="section__link">compact</a> </li><li class="section__item"> <a href="/liquid/filters/concat/" class="section__link">concat</a> </li><li class="section__item"> <a href="/liquid/filters/date/" class="section__link">date</a> </li><li class="section__item"> <a href="/liquid/filters/default/" class="section__link">default</a> </li><li class="section__item"> <a href="/liquid/filters/divided_by/" class="section__link">divided_by</a> </li><li class="section__item"> <a href="/liquid/filters/downcase/" class="section__link">downcase</a> </li><li class="section__item"> <a href="/liquid/filters/escape/" class="section__link">escape</a> </li><li class="section__item"> <a href="/liquid/filters/escape_once/" class="section__link">escape_once</a> </li><li class="section__item"> <a href="/liquid/filters/first/" class="section__link">first</a> </li><li class="section__item"> <a href="/liquid/filters/floor/" class="section__link">floor</a> </li><li class="section__item"> <a href="/liquid/filters/join/" class="section__link">join</a> </li><li class="section__item"> <a href="/liquid/filters/last/" class="section__link">last</a> </li><li class="section__item"> <a href="/liquid/filters/lstrip/" class="section__link">lstrip</a> </li><li class="section__item"> <a href="/liquid/filters/map/" class="section__link">map</a> </li><li class="section__item"> <a href="/liquid/filters/minus/" class="section__link">minus</a> </li><li class="section__item"> <a href="/liquid/filters/modulo/" class="section__link">modulo</a> </li><li class="section__item"> <a href="/liquid/filters/newline_to_br/" class="section__link">newline_to_br</a> </li><li class="section__item"> <a href="/liquid/filters/plus/" class="section__link">plus</a> </li><li class="section__item"> <a href="/liquid/filters/prepend/" class="section__link">prepend</a> </li><li class="section__item"> <a href="/liquid/filters/remove/" class="section__link">remove</a> </li><li class="section__item"> <a href="/liquid/filters/remove_first/" class="section__link">remove_first</a> </li><li class="section__item"> <a href="/liquid/filters/remove_last/" class="section__link">remove_last</a> </li><li class="section__item"> <a href="/liquid/filters/replace/" class="section__link">replace</a> </li><li class="section__item"> <a href="/liquid/filters/replace_first/" class="section__link">replace_first</a> </li><li class="section__item"> <a href="/liquid/filters/replace_last/" class="section__link">replace_last</a> </li><li class="section__item"> <a href="/liquid/filters/reverse/" class="section__link">reverse</a> </li><li class="section__item"> <a href="/liquid/filters/round/" class="section__link">round</a> </li><li class="section__item"> <a href="/liquid/filters/rstrip/" class="section__link">rstrip</a> </li><li class="section__item"> <a href="/liquid/filters/size/" class="section__link">size</a> </li><li class="section__item"> <a href="/liquid/filters/slice/" class="section__link">slice</a> </li><li class="section__item"> <a href="/liquid/filters/sort/" class="section__link">sort</a> </li><li class="section__item"> <a href="/liquid/filters/sort_natural/" class="section__link">sort_natural</a> </li><li class="section__item"> <a href="/liquid/filters/split/" class="section__link">split</a> </li><li class="section__item"> <a href="/liquid/filters/strip/" class="section__link">strip</a> </li><li class="section__item"> <a href="/liquid/filters/strip_html/" class="section__link">strip_html</a> </li><li class="section__item"> <a href="/liquid/filters/strip_newlines/" class="section__link">strip_newlines</a> </li><li class="section__item"> <a href="/liquid/filters/sum/" class="section__link">sum</a> </li><li class="section__item"> <a href="/liquid/filters/times/" class="section__link">times</a> </li><li class="section__item"> <a href="/liquid/filters/truncate/" class="section__link">truncate</a> </li><li class="section__item"> <a href="/liquid/filters/truncatewords/" class="section__link">truncatewords</a> </li><li class="section__item"> <a href="/liquid/filters/uniq/" class="section__link">uniq</a> </li><li class="section__item"> <a href="/liquid/filters/upcase/" class="section__link">upcase</a> </li><li class="section__item"> <a href="/liquid/filters/url_decode/" class="section__link">url_decode</a> </li><li class="section__item"> <a href="/liquid/filters/url_encode/" class="section__link">url_encode</a> </li><li class="section__item"> <a href="/liquid/filters/where/" class="section__link section__link--is-active">where</a> </li></ul></div><script type="text/javascript"> document.getElementById("filters").scrollIntoView(); </script></nav> </div> <div class="content__overlay"></div> <main class="content__area" role="main"> <div class="content"> <button class="menu-button"> <svg height="16" viewBox="0 0 12 16" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 9h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm0-4h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm-10.82 6h10.81c.59 0 .59.41.59 1s0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1s0-1 .59-1z"/></svg> Menu </button> <h1>where </h1> Creates an array including only the objects with a given property value, or any <a href="/liquid/basics/truthy-and-falsy/#truthy">truthy</a> value by default. In this example, assume you have a list of products and you want to show your kitchen products separately. Using <code class="language-plaintext highlighter-rouge">where</code>, you can create an array containing only the products that have a <code class="language-plaintext highlighter-rouge">"type"</code> of <code class="language-plaintext highlighter-rouge">"kitchen"</code>. Input <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>All products: {% for product in products %} - {{ product.title }} {% endfor %} {% assign kitchen_products = products | where: "type", "kitchen" %} Kitchen products: {% for product in kitchen_products %} - {{ product.title }} {% endfor %} </code></pre></div></div> Output <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>All products: - Vacuum - Spatula - Television - Garlic press Kitchen products: - Spatula - Garlic press </code></pre></div></div> Say instead you have a list of products and you only want to show those that are available to buy. You can <code class="language-plaintext highlighter-rouge">where</code> with a property name but no target value to include all products with a <a href="/liquid/basics/truthy-and-falsy/#truthy">truthy</a> <code class="language-plaintext highlighter-rouge">"available"</code> value. Input <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>All products: {% for product in products %} - {{ product.title }} {% endfor %} {% assign available_products = products | where: "available" %} Available products: {% for product in available_products %} - {{ product.title }} {% endfor %} </code></pre></div></div> Output <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>All products: - Coffee mug - Limited edition sneakers - Boring sneakers Available products: - Coffee mug - Boring sneakers </code></pre></div></div> The <code class="language-plaintext highlighter-rouge">where</code> filter can also be used to find a single object in an array when combined with the <code class="language-plaintext highlighter-rouge">first</code> filter. For example, say you want to show off the shirt in your new fall collection. Input <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% assign new_shirt = products | where: "type", "shirt" | first %} Featured product: {{ new_shirt.title }} </code></pre></div></div> Output <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Featured product: Hawaiian print sweater vest </code></pre></div></div> </div> </main> <script src="/liquid/js/script.js"></script> </body> </html>

CINXE.COM

where – Liquid template language