# Liquid Context Reference Guide **Complete reference of Liquid drops, filters, and context available in Modyo templates, pages, and widgets.** --- ## Table of Contents 1. [Overview](#overview) 2. [Liquid in Modyo](#liquid-in-modyo) 3. [Context by Resource Type](#context-by-resource-type) 4. [Global Drops](drops-and-filters.md#global-drops) 5. [Page-Specific Drops](drops-and-filters.md#page-specific-drops) 6. [Content Drops](drops-and-filters.md#content-drops) 7. [Navigation Drops](drops-and-filters.md#navigation-drops) 8. [User & Session Drops](drops-and-filters.md#user--session-drops) 9. [Modyo-Specific Filters](drops-and-filters.md#modyo-specific-filters) 10. [Common Patterns](drops-and-filters.md#common-patterns) 11. [Limitations](drops-and-filters.md#limitations) 12. [Best Practices](drops-and-filters.md#best-practices) --- ## Overview **What is Liquid?** Liquid is a templating language created by Shopify. Modyo uses Liquid for dynamic content rendering in: - Layouts - Page templates - Snippets - Widget HTML - CSS templates (limited) - JS templates (limited) **Liquid Syntax**: ```liquid {{ variable }} {% if condition %} {% for item in items %} {{ item | filter }} {% snippet 'name' %} ``` **Key Concept: Drops** "Drops" are objects available in Liquid context. Modyo provides specific drops depending on where the code executes: ```liquid {{ site.name }} {{ page.title }} {{ current_user.name }} {{ menus['main'] }} ``` --- ## Liquid in Modyo ### Where Liquid Works | Resource | Liquid Support | Private Drops | CDN Cached | |----------|----------------|---------------|------------| | **Layouts** | ✅ Full | ✅ Yes | ❌ Server-rendered | | **Page Templates** | ✅ Full | ✅ Yes | ❌ Server-rendered | | **Snippets** | ✅ Full | ✅ Yes | ❌ Server-rendered | | **Widget HTML** | ✅ Full | ✅ Yes | ❌ Server-rendered | | **CSS Templates** | ⚠️ Partial | ❌ No | ✅ CDN-cached | | **JS Templates** | ⚠️ Partial | ❌ No | ✅ CDN-cached | ### Full vs Partial Liquid Support **Full Liquid (Layouts, Snippets, Pages, Widgets)**: ```liquid {{ site.url }} {{ page.title }} {{ current_user.name }} {{ session.authenticated }} {% if current_user %} {% for entry in entries %} {% snippet 'header' %} {{ product.price | money }} {{ entry.published_at | date: "%B %d, %Y" }} ``` **Partial Liquid (CSS/JS Templates)**: ```liquid {{ site.url }} {{ spaces['blog'].types['post'].entries }} {% snippet 'colors' %} {{ current_user.name }} {{ session.authenticated }} {% for color in colors %} {{ entry.title | upcase }} ``` **Why the limitation?** CSS/JS templates are CDN-cached. Private user data would be cached and served to wrong users. **See**: [CSS_ORGANIZATION.md](CSS_ORGANIZATION.md) for complete CSS/JS template guide. --- ## Context by Resource Type ### Layouts **Available Drops**: ALL (full Liquid support) **Context**: ```liquid {{ site }} {{ page }} {{ menus }} {{ spaces }} {{ current_user }} {{ session }} {{ html5 }} {{ content_for_layout }} ``` **Example Layout**: ```liquid {{ html5.open_tag }} {% snippet 'head' %} {{ page.title }} - {{ site.name }} {% snippet 'header' %}
{{ content_for_layout }}
{% snippet 'footer' %} {{ html5.close_tag }} ``` ### Page Templates (Content Pages) **Available Drops**: ALL + content-specific drops **Context**: ```liquid {{ site }} {{ page }} {{ menus }} {{ spaces }} {{ current_user }} {{ session }} {{ entries }} {{ entry }} {{ categories }} ``` **Example Index Template** (`/blog`): ```liquid

{{ page.name }}

{% for entry in entries %}

{{ entry.fields['Title'] }}

{{ entry.fields['Excerpt'] }}

{% endfor %}
``` **Example Show Template** (`/blog/{slug}`): ```liquid

{{ entry.fields['Title'] }}

{{ entry.fields['Body'] }}
{% if entry.fields['Author'] %}
By {{ entry.fields['Author'] }}
{% endif %}
``` ### Snippets **Available Drops**: ALL (full Liquid support) **Context**: Same as layouts + any variables passed via `with` parameter ```liquid {% snippet 'product_card' with product %}

{{ product.name }}

{{ product.price | money }}

View Details
``` ### Widget HTML **Available Drops**: ALL (full Liquid support) **Context**: ```liquid {{ site }} {{ page }} {{ menus }} {{ spaces }} {{ current_user }} {{ session }} {{ variables }} ``` **Example Widget**: ```liquid

{{ variables.title }}

{% assign products = spaces['catalog'].types['product'].entries %} {% for product in products limit: variables.limit %}
{{ product.fields['Name'] }}

{{ product.fields['Name'] }}

{{ product.fields['Price'] | money }}

{% if current_user %} {% else %} Login to Purchase {% endif %}
{% endfor %}
``` ### CSS Templates **Available Drops**: Public drops only (NO private drops) **Context**: ```liquid {{ site.url }} {{ spaces['blog'].types['post'].entries }} {% snippet 'colors' %} {{ current_user.name }} {{ session.authenticated }} ``` **Example CSS Template**: ```liquid /* Import color variables from snippet */ {% snippet 'colors' %} /* Use public drops */ .site-link::after { content: "{{ site.name }}"; } /* Dynamic styles from content */ {% assign themes = spaces['config'].types['theme'].entries %} {% for theme in themes %} .theme-{{ theme.slug }} { --primary: {{ theme.fields['Primary Color'] }}; --secondary: {{ theme.fields['Secondary Color'] }}; } {% endfor %} ``` ### JS Templates **Available Drops**: Public drops only (NO private drops) **Context**: Same as CSS templates **Example JS Template**: ```liquid // Site configuration window.SITE_CONFIG = { name: "{{ site.name }}", url: "{{ site.url }}", locale: "{{ site.default_locale }}" }; // Dynamic config from content {% assign config = spaces['config'].types['settings'].entries | first %} window.APP_CONFIG = { apiUrl: "{{ config.fields['API URL'] }}", gaId: "{{ config.fields['Google Analytics ID'] }}" }; // ❌ CAN'T USE // user: { // name: "{{ current_user.name }}" // FAILS - private drop // } ``` ---