Skip to main content

Liquid Template Playground

Use our interactive playground to experiment with Liquid templates in real-time.

Access the Playground​

Visit the Liquid Template Playground to start experimenting with Liquid code.

Features​

  • Live Editing: Write and edit Liquid templates with syntax highlighting
  • Instant Preview: See rendered output immediately
  • Mock Data: Test with realistic product and shop data
  • Error Handling: Get helpful error messages when something goes wrong

Example Usage​

Try this example in the playground:

{% comment %}
  Product Card Example
{% endcomment %}

<div class="product-card">
  <h2>{{ product.name }}</h2>
  <p class="price">{{ product.price | money }}</p>
  
  {% if product.available %}
    <button class="btn-primary">Add to Cart</button>
  {% else %}
    <span class="out-of-stock">Out of Stock</span>
  {% endif %}
</div>

Available Objects​

The playground includes mock data for:

  • product: Product object with name, price, availability
  • shop: Shop information
  • cart: Shopping cart data
  • collections: Product collections

Available Filters​

Common Liquid filters are supported:

  • money - Format prices
  • img_url - Image URL generation
  • product_url - Product URL generation
  • default - Default values
  • date - Date formatting

Tips​

  1. Start Simple: Begin with basic variable output
  2. Test Conditionals: Try if/else statements
  3. Use Filters: Experiment with different filters
  4. Check Output: Always review the rendered HTML

Limitations​

The playground is a simplified version for learning purposes. In production:

  • Templates are rendered server-side
  • Full access to all O2VEND objects and filters
  • Real-time data from your store
  • Complete Liquid syntax support

Next Steps​