Shopify Liquid Inspector
A lightweight VS Code extension that gives you instant hover documentation and validation for Shopify Liquid templates.
✨ What it does
• Hover over objects (product, collection, …) to see their properties and types.
• Hover over filters to view syntax, parameters and examples.
• Warns you about invalid or deprecated properties, filters.
• Works perfectly with the official Shopify Liquid extension – keep it installed for syntax highlighting, add Liquid Inspector for deep insight.
🚀 How to use
Install the extension from the VS Code Marketplace.
Open a .liquid file.
Hover over any Liquid identifier:
{{ product.price | money }} <!-- filter docs -->
{% for product in collection.products %}
{{ product.title }} <!-- object docs -->
{% endfor %}
(Optional) Tweak settings in Preferences › Settings › Extensions › Liquid Inspector.
⚙️ Key settings
| Setting |
Purpose |
Default |
liquidInspector.enabled |
Enable/disable the extension |
true |
liquidInspector.showTypes |
Show types in hovers |
true |
liquidInspector.showDescription |
Show descriptions in hovers |
true |
liquidInspector.showDeprecatedWarnings |
Highlight deprecated items |
true |
liquidInspector.enableFilterHover |
Enable filter hover docs |
true |
Tip: Set liquidInspector.maxPropertiesInHover if you only want to see a few properties.
📄 License
MIT
Made with ❤️ for Shopify theme developers
| |
