DEV Community

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

Posted on

4

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more