[FIXED] How to access custom JSON file in shopify at liquid file level

Issue

I know it is possible to access a JSON file at the JavaScript level on the front end, but is it possible to access a JSON file and its contents in /assets/ folder (or elsewhere if need be) at the Liquid level?

I was hoping for something like

{{ '/assets/some_file.json.liquid' | example_object.inner_object.some_key }}

Solution

During server-side rendering, Shopify turns Liquid into a massive string, and sends that across the wire as browser food. HTML, CSS and JS.

If you have an asset foo.js containing JSON, you can indeed render that to the client, as

{{ 'foo.js' | asset_url }}

But you cannot use the JSON itself to steer any kind of server-side rendering. You can embed Liquid tags in your JS file and name it foo.js.liquid, and anything in your Liquid will affect the render, but then why bother with the JSON part?

If you are so interested in special Liquid rendering, setup your theme to render with settings and their values.

Alternatively, once the JSON downloads to the client, you are free to monkey around with pure JS to achieve glory.

Answered By - David Lazar

Answer Checked By - Katrina (PHPFixing Volunteer)