Liquid language preview

1. Product card

a comment, output tags, and a filter

horizon-dark

{% comment %}Renders a product card{% endcomment %}
<div class="card">
  <h1>{{ product.title | upcase }}</h1>
  {% if product.available %}
    <p>{{ product.price }}</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}
</div>

atom-one-dark

{% comment %}Renders a product card{% endcomment %}
<div class="card">
  <h1>{{ product.title | upcase }}</h1>
  {% if product.available %}
    <p>{{ product.price }}</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}
</div>

github-dark

{% comment %}Renders a product card{% endcomment %}
<div class="card">
  <h1>{{ product.title | upcase }}</h1>
  {% if product.available %}
    <p>{{ product.price }}</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}
</div>

dracula

{% comment %}Renders a product card{% endcomment %}
<div class="card">
  <h1>{{ product.title | upcase }}</h1>
  {% if product.available %}
    <p>{{ product.price }}</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}
</div>

nord

{% comment %}Renders a product card{% endcomment %}
<div class="card">
  <h1>{{ product.title | upcase }}</h1>
  {% if product.available %}
    <p>{{ product.price }}</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}
</div>

github

{% comment %}Renders a product card{% endcomment %}
<div class="card">
  <h1>{{ product.title | upcase }}</h1>
  {% if product.available %}
    <p>{{ product.price }}</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}
</div>

2. Loop with assignment

for/endfor, assign, and increment

horizon-dark

{% assign featured = collection.products | first %}
<ul>
  {% for item in collection.products %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

atom-one-dark

{% assign featured = collection.products | first %}
<ul>
  {% for item in collection.products %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

github-dark

{% assign featured = collection.products | first %}
<ul>
  {% for item in collection.products %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

dracula

{% assign featured = collection.products | first %}
<ul>
  {% for item in collection.products %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

nord

{% assign featured = collection.products | first %}
<ul>
  {% for item in collection.products %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

github

{% assign featured = collection.products | first %}
<ul>
  {% for item in collection.products %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

3. Include with variables

render/include tags passing local variables

horizon-dark

{% render 'price', product: product, on_sale: true %}
{{ product.description | strip_html | truncate: 100 }}

atom-one-dark

{% render 'price', product: product, on_sale: true %}
{{ product.description | strip_html | truncate: 100 }}

github-dark

{% render 'price', product: product, on_sale: true %}
{{ product.description | strip_html | truncate: 100 }}

dracula

{% render 'price', product: product, on_sale: true %}
{{ product.description | strip_html | truncate: 100 }}

nord

{% render 'price', product: product, on_sale: true %}
{{ product.description | strip_html | truncate: 100 }}

github

{% render 'price', product: product, on_sale: true %}
{{ product.description | strip_html | truncate: 100 }}