CINXE.COM
slice – 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>slice – Liquid template language</title> <meta name="description" content="Liquid filter that returns a substring or item from a given position in a string or array."> <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/slice/"> <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/slice/"> <meta property="og:title" content="slice"> <meta property="og:description" content="Liquid filter that returns a substring or item from a given position in a string or array."> <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="slice"> <meta name="twitter:description" content="Liquid filter that returns a substring or item from a given position in a string or array."> <!-- Global site tag (gtag.js) - Google Analytics --> <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 section__link--is-active">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">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"> <span aria-hidden="true"><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></span> <span>Menu</span> </button> <h1>slice</h1> <p>Returns a substring of one character or series of array items beginning at the index specified by the first argument. An optional second argument specifies the length of the substring or number of array items to be returned.</p> <p>String or array indices are numbered starting from 0.</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"Liquid"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">slice</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L </code></pre></div></div> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"Liquid"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">slice</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>q </code></pre></div></div> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"Liquid"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">slice</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="p">,</span><span class="w"> </span><span class="mi">5</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>quid </code></pre></div></div> <p>Here the input value is an array:</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">beatles</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"John, Paul, George, Ringo"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">split</span><span class="p">:</span><span class="w"> </span><span class="s2">", "</span><span class="w"> </span><span class="p">%}</span> <span class="p">{{</span><span class="w"> </span><span class="nv">beatles</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">slice</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w"> </span><span class="mi">2</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code> PaulGeorge </code></pre></div></div> <p>If the first argument is a negative number, the indices are counted from the end of the string.</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"Liquid"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">slice</span><span class="p">:</span><span class="w"> </span><span class="o">-</span><span class="mi">3</span><span class="p">,</span><span class="w"> </span><span class="mi">2</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ui </code></pre></div></div> </div> </main> <script src="/liquid/js/script.js"></script> </body> </html>