Liquid to JSON Converter

In Shopify theme development, it's a common task to inspect the data available in Liquid objects like product, collection, or cart. The standard way to do this is to serialize the object into JSON using the | json filter and print it inside a <script> tag.

This tool simplifies the process by extracting and formatting that JSON output for you. It's incredibly useful for:

• Debugging: Quickly see the exact structure and data of any Liquid object without having to dig through your browser's dev tools.
• Headless Development: When building a headless Shopify site, you often need to know what data you can expect from the Storefront API. You can use this tool to grab the JSON representation of a product from a standard theme to model your data structures.
• Learning: Understand the properties and values available within Shopify's Liquid objects by exploring them in a clean, hierarchical format.

How to Use the Converter

1. In your Shopify theme's Liquid file (e.g., `product.liquid`), add the following code to output the object you want to inspect:

{{ product | json }}

2. View the page in your browser and copy the entire output. It might look messy.

3. Paste the copied code into the "Liquid Input" field above and click "Convert to JSON". The tool will automatically extract and beautify the JSON for you.