Passing a parameter

Parameters assign values to variables when you render a snippet. This allows you to re-use the same snippet with different values.

Input
<!-- /snippets/1?params={"color":"blue"} -->
<p>The sky is {{ color }}.</p>
Output
<p>The sky is blue.</p>

You can use the same snippet and a different parameter for a different output:

Input
<!-- /snippets/1?params={"color":"green"} -->
<p>The sky is {{ color }}.</p>
Output
<p>The sky is green.</p>

Array parameters are supported.

Input
<!-- /snippets/1?params={"names":["Jack","Nancy","Harry"]} -->
{% for name in names -%}
  Hi {{ name }}!
{% endfor -%}
Output
Hi Jack!
Hi Nancy!
Hi Harry!

Object parameters are also supported.

Input
<!-- /snippets/1?params={"person":{"name":{"first":"Jean-Luc","last":"Picard"}}} -->
Hi {{ person.name.first }}!
Output
Hi Jean-Luc!

Precedence

Given the various ways you can set variables, it’s important to consider the following precedence:

  1. The assign tag takes precedence over parameters.
  2. Parameters take precedence over the default filter.
  3. If a variable has no value via assign, parameters, or a default filter, it’s nil.
  4. If extra parameters are passed, they’re ignored.

For example:

Input
<!-- /snippets/1?params={"foo":"shirt","bar":"pants","corge":"socks"} -->
{% assign foo = "hat" -%}
{{ foo }}
{{ bar }}
{{ baz }}
{{ qux | default: "shoes" }}
Output
hat
pants

shoes
  • the value of foo was “hat”, because assign takes precedence over parameters;
  • the value of bar was passed by parameters;
  • the value of baz was never assigned or passed by parameter, so nothing was printed to the page;
  • the value of qux was never assigned or passed by parameter, but the default filter printed “shoes” to the page; and,
  • the parameter corge was passed but never used and ignored.

Find a typo? Something is wrong in this documentation? Fork and edit it!