2 lines to Expose Product Liquid Object to JavaScript on Shopify
Shopify treats Liquid Objects differently from JSON objects by default. Occasionally, it becomes necessary to manipulate data using JavaScript (JS). Unfortunately, the data isn’t always available in the product JSON. This article demonstrates how to expose the Liquid object to the front end, making it usable in JS logic.
The primary approach involves creating a product template that returns a Liquid object, which can then be utilized as needed.
The main idea is that we create a product template that returns a liquid object, then we use this object however we want to.
…Let's begin:
Setting up the Product Template:
Log in to your Shopify Admin and navigate to Online Store, then Themes.
Locate your desired theme and click on Edit Code.
In the sidebar, find Templates, then click Add a new template.
From the modal, select Product as the Template type and choose Liquid.
On the File name input, type anything you want, I am going with json.
From the Modal, choose Product on Template type, then choose liquid.
On the File name input, type anything you want, I am going with json.
Updating the Template Content:
Click Done.
Updating the file content, copy/paste the above code in the created template/file.
{% layout none %}
{{ product | json }}
Now, our template is ready to use, all you need to do is to add this query parameter to the product URL:
e.g:
https://my-store.myshopify.com/products/beauty-essentials?view=jsonLike this, you’ll get the liquid object between your hand and ready to be used.
Let’s use it in a basic JS snippet code to fetch a product JSON liquid object.
fetch('https://tikshop-demo-staging.myshopify.com/products/beauty-essentials?view=json')
.then(function(response) {
return response.json();
})
.then((data) => {
// Our Object is ready to use as data Object.
console.log(data)
})As you saw, we’ve manipulated the liquid object inside a JavaScript code. And like this, you can use the same method with Collection pages, search, and even the cart liquid object.
By implementing these steps, you’ve successfully exposed the product Liquid object to JavaScript on Shopify. Feel free to leave your questions or comments below, or reach out to me directly. I’m here to help!
Thank you for reading. I hope you’ve gained valuable insights from this article. To stay updated and discover more useful resources, consider following me on LinkedIn, Twitter, and Instagram.
This is Mohamed on how to expose product liquid object to JavaScript on Shopify.
#Useful resources
Follow me for more:
If you need help with anything, you can hire me from here.
If you like this article, Buy Me a Coffee, Maybe? Even a dollar can make me smile.
