How to Use Liquid in Javascript and Stylesheets

You can run Liquid in javascript and stylesheet files so compiled CDN output can include values from the site (for example a logo URL from site settings). This is not the same as running Liquid in a page template. Several objects and methods that work on pages do not work here.

When Liquid runs

  • Stylesheets: Liquid is detected automatically. It runs before SCSS or LESS compilation.
  • Javascript: Liquid is not detected automatically, because Handlebars uses similar syntax. Check Parse Liquid Code on the javascript object.

@imported stylesheet partials that contain Liquid compile in their own context. They do not share Liquid variables with the parent unless you use {% include %}.

What is not available

  • There is no page entity or request.
  • Some methods do not work in this context (for example {% set_cookie %}).
  • Random output is disabled because the compiled file is cached on the CDN.

Including other files

Use {% include javascript|stylesheet|template "path" %}. If you omit the type, it defaults to the current object type. Paths are relative to the current file unless they start with /.

  • Including javascript does not pull that file’s Pre-Includes or Post-Includes.
  • Including a stylesheet does not run SCSS or LESS on the included file.

Republish after related objects change

Objects you load with Liquid from javascript or CSS do not mark the parent file dirty. If you change a logo in site settings, a menu, a gallery, or another object referenced only from Liquid in JS/CSS, republish the javascript or stylesheet so the CDN copy updates.