DEV Community

Cover image for Shopify Liquid REPL with API & JSON
Prashant Ardeshana
Prashant Ardeshana

Posted on

Shopify Liquid REPL with API & JSON

I am very excited πŸ˜€ to share my new website Shopify Liquid REPL.

I recently saw Taylor Page's post about the Shopify REPL (Read-Eval-Print-Loop), which prompted me to review the site. After checking the website's output, I created a new version that integrates JSON data input via the API. You can now use direct JSON data without needing to add an API. For this update, I used HTML, CSS, and JavaScript, along with liquid.browser.min.js. Everything is working well so far. Tom Blanchard, you created an excellent site using Polaris and React, and I used your site as a reference for my updates.

πŸš€ Here are some key points:

  • πŸ™‚ Simple Data: If you use simple data like variables, you can use them directly.
  • 😁 Complex Data: If you use data related to products, collections, users, etc., you need to add the JSON code.
  • πŸ€” Testing API: I have included a dummy testing users API that you can use.
  • πŸ˜₯ Other Testing APIs: You can find other testing APIs at Fake Store API.

πŸ‘» How to Use:

  1. If you have an API or JSON, click the "Add JSON" button, add your data, and then close the popup.
  2. Add Liquid code to the input.liquid field (e.g., a product for loop) and include the product title in the loop.
  3. After that, you will see all the product titles displayed in the output box.

That's it! If anyone has any questions, feel free to DM me πŸ˜‡.
Thanks to Taylor and Tom 😊 for sharing the Shopify REPL post, your posts inspired me to create this website.

Shopify Liquid REPL πŸ”— : http://liquid-repl.mycodemagic.com

Top comments (0)