Liquid

Liquid is an actively used template language created in 2008.

11Years Old

9,355Users

0Jobs

• Liquid ranks in the top 50% of languages
• the Liquid website
• Liquid on github
• Liquid first appeared in 2008
• file extensions for Liquid include liquid
• I have 35 facts about Liquid. what would you like to know? email me and let me know how I can help.

Example code from Linguist:

<h3>We have wonderful products!</h3>
<ul id="products">
  <div id="productpage">
    <div id="productimages"><div id="productimages-top"><div id="productimages-bottom">
      {% for image in product.images %}
        {% if forloop.first %}
          <a href="{{ image | product_img_url: 'large' }}" class="productimage" rel="lightbox">
            <img src="{{ image | product_img_url: 'medium'}}" alt="{{product.title | escape }}" />
          </a>
        {% else %}
          <a href="{{ image | product_img_url: 'large' }}" class="productimage-small" rel="lightbox">
            <img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" />
          </a>
        {% endif %}
      {% endfor %}
    </div></div></div>

    <h2>{{ product.title }}</h2>

    <ul id="details" class="hlist">
      <li>Vendor: {{ product.vendor | link_to_vendor }}</li>
      <li>Type: {{ product.type | link_to_type }}</li>
    </ul>

    <small>{{ product.price_min | money }}{% if product.price_varies %} - {{ product.price_max | money }}{% endif %}</small>

    <div id="variant-add">
      <form action="/cart/add" method="post">

        <select id="variant-select" name="id" class="product-info-options">
          {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
          {% endfor %}
        </select>

        <div id="price-field" class="price"></div>

      <div style="text-align:center;"><input type="image" name="add" value="Add to Cart" id="add" src="{{ 'addtocart.gif' | asset_url }}" /></div>
      </form>
    </div>

    <div class="description textile">
      {{ product.description }}
    </div>
  </div>

  <script type="text/javascript">
  <!--
    // prototype callback for multi variants dropdown selector
    var selectCallback = function(variant, selector) {
      if (variant && variant.available == true) {
        // selected a valid variant
        $('add').removeClassName('disabled'); // remove unavailable class from add-to-cart button
        $('add').disabled = false;           // reenable add-to-cart button
        $('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
      } else {
        // variant doesn't exist
        $('add').addClassName('disabled');      // set add-to-cart button to unavailable class
        $('add').disabled = true;              // disable add-to-cart button
        $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
      }
    };

    // initialize multi selector for product
    Event.observe(document, 'dom:loaded', function() {
      new Shopify.OptionSelectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
    });
  -->
  </script>
</ul>

Last updated July 22nd, 2019