Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Shopify Liquid PreviewNew to Visual Studio Code? Get it now.
Shopify Liquid Preview

Shopify Liquid Preview

Trevor Kirchner

|
29,625 installs
| (2) | Free
Live preview for Shopify Liquid templates
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Shopify Liquid Preview for Visual Studio Code

Gives a live preview for Shopify Liquid templates. The extension can compile multiple Shopify Liquid templates on the fly, applying preview data and rendering the result in separate window.

Features

  • Live preview for Shopify Liquid templates, updating as you type.
  • Support for fake data. Choose your json file to be a context of the template, your preview will also update as you type.
  • Able to preview multiple templates using the same or different fake data.
  • 💔 As of 2.0.0 this extension no longer renders HTML, try using it with an HTML preview extension like HTML Preview!

Usage

  • Use the keybinding ctrl+shift+p and type Shopify Liquid: Open Preview to the Side to run from command panel or use the keybinding ctrl+k v while selecting a file with a .liquid extension.
  • Choose the file to use as fake data from the file explorer.

Demo

demo

Credits

  • Handlebars Preview for Visual Studio Code
  • A HTML previewer for Visual Studio Code

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft