{{ product | json }} not working in a .js file?

Shopify Partner
13 0 2

I have a `custom.js.liquid` file under my assets folder, and I have added this line to `theme.liquid`.

<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

I am trying to output a product's title to javascript, in `custom.js.liquid`, I put

console.log({{ all_products['absolut-vodka'] | json }});

This line can't be recognized by the .js.liquid file. In frontend, in the `custom.js` file it becomes


On the other hand, if I put

<script>console.log({{ all_products['absolut-vodka'] | json}});</script>

in the `theme.liquid` file, it can output the correct object.

What did I do wrong?

Replies 2 (2)

Shopify Partner
211 13 55

Sorry I have erased my first message as I had misread your question.


To correct my first answer:



The shopify staff there mentions it may not be possible to grab certain objects in the liquid js file.


We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.

3 1 1

So I was having the same issue and came across this stack overflow https://stackoverflow.com/questions/25983518/whats-the-difference-between-js-and-js-liquid-in-shopif...

The js and css asset files are static and cannot load dynamic data. Instead you need to create a snippet with a script tag and have your custom.js in there. This worked for me then.