Skip to main content

Edit with Liquid

When the point-and-click options aren't enough, you can open the templates that render your site and shape them yourself. Village CMS uses Liquid, a friendly templating language (the same idea behind Shopify themes): mostly plain HTML, with small tags for pulling in your content and adding a little logic. You edit it right in the admin, with no local setup and nothing to deploy.

The template editor

Under Templates in the admin you'll find everything that renders your site: page templates, reusable partials (like the header and footer), blocks, and your CS, each editable in a full code editor (Monaco, the same one that powers VS Code) with syntax highlighting. Save, and your change is live.

A quick feel for Liquid

Liquid is HTML with two extra touches: {{ ... }} to print a value, and {% ... %} for logic like loops and conditions. Your content and settings are available as variables — a block's fields, your Site Settings, the current page, your navigation menus, so a template can do things like "show this heading only if it's set" or "loop through these gallery images." If you've written a little HTML before, you'll be comfortable within minutes.

Edit content without breaking your site

Most templates and partials are maintained by Village CMS. We ship improvements and fixes over time, and an upgrade replaces those files on your site, so you get the benefit of the upgrades. If you do edit a core file, it will not be updated. For that, you can review the diffs through Templates :: Library. 

To keep your work safe, customize in the places that are never updated:

  • Style — your site's custom CSS. Add rules here to override or extend the theme.
  • Header-extra — a file just for your <head> additions: analytics, verification tags, custom fonts or CSS. Created once for your site and never touched by upgrades.
  • Footer-custom — a fully hand-built footer, used when you switch the footer to Custom mode. Also yours to keep; upgrades never overwrite it.

For anything else, the safest path is to add your own blocks, templates, or CSS, rather than editing a core file in place. That way your customizations stick and you keep receiving platform updates. 

Tip: to recolour or restyle site-wide, add rules to style rather than editing the managed theme file (bootstrap-theme). Your CSS still wins, and you keep getting platform updates.

Handy auto-formatting

Type as you normally would, and our filteres with auto-formatti for you. A couple of exampes are:

  • Markdown — Text areas get basic formatting by rendering Markdown text as HTML.
  • Hex_bg_style / hex_text_color — Apply a colour as a background and automatically pick a readable text colour to go with it.

Build your own blocks

The blocks in the catalog are just a template plus a list of fields. You can make your own the same way. Define the fields a block needs (text, rich text, image, a dropdown, a colour, a checkbox, or a repeating set like gallery items) and Village CMS automatically builds the editing form in the admin. Write the Liquid that lays them out, and you've got a new, reusable block your editors can drop onto any page with no code in sight for them.

Your own CSS and theme

Add your own CSS right in the Templates area for anything Bootstrap's utility classes don't cover. And because your Site Settings colours and fonts flow into the site through a theme file, you can reach in there to fine-tune exactly how those settings become styles .

Need something the templates can't express — a custom integration, a new kind of page, a link to another system?

That's the deepest layer: Custom development.