Building Dynamic Shopify Features with JavaScript and JSON

Introduction

Dynamic features can transform a static Shopify store into a highly interactive and engaging platform. In this article, we explore how to use JavaScript and JSON to build dynamic elements—such as real-time stock tracking, product filtering, and interactive countdown timers—while integrating seamlessly with Shopify’s backend data.

‍

Leveraging JSON Data in Shopify

Shopify frequently uses JSON to output product information, metafields, and more. By leveraging JSON, you can dynamically manipulate data on the client side.

‍

Example: Outputting JSON Data

In your Liquid template, output product data as JSON:

liquid:

<script>
  var productData = {{ product | json }};
</script>

This creates a JavaScript object that holds all product details, enabling real-time manipulation on the front end.

‍

Theme Editor Fields with JSON

Shopify sections can appear in the theme editor using JSON schemas, allowing developers to easily link to other articles through customizable settings.
Follow this guide to see a detailed review, to see a detailed guide.

‍

‍

Enhancing User Interaction with JavaScript

JavaScript enables dynamic updates without page reloads, providing a smoother user experience. From dynamic filtering to live inventory updates, JavaScript works hand-in-hand with JSON data to create interactive features.

‍

Real-Time Product Filtering

Imagine you want users to filter products by tags (e.g., "sale" or "new"). Here’s a detailed example.

HTML Structure for Filtering Controls

html:

<div id="filter-controls">
  <button data-tag="sale">Sale</button>
  <button data-tag="new">New Arrivals</button>
  <button data-tag="all">All Products</button>
</div>
<div id="product-list"></div>

JavaScript for Dynamic Filtering

javascript:

<script>
  // Assume productData is a JSON object containing an array of products
  const productList = document.getElementById('product-list');
  const filterControls = document.getElementById('filter-controls');

  // Function to render products on the page
  function renderProducts(products) {
    productList.innerHTML = products.map(product => `
      <div class="product-item">
        <h3>${product.title}</h3>
        <p>${product.description}</p>
      </div>
    `).join('');
  }

  // Event delegation for filter buttons
  filterControls.addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
      const tag = event.target.getAttribute('data-tag');
      let filteredProducts;
      if(tag === 'all') {
        filteredProducts = productData.products;
      } else {
        filteredProducts = productData.products.filter(product => 
          product.tags.includes(tag)
        );
      }
      renderProducts(filteredProducts);
    }
  });

  // Initial render
  renderProducts(productData.products);
</script>

This code listens for button clicks and filters the products based on the selected tag.

‍

‍

Implementing a Real-Time Countdown Timer

A countdown timer can create urgency for limited-time offers. Here’s how to implement one:

HTML and Liquid for Countdown Timer

liquid:

{% if product.metafields.custom.countdown_end %}
  {% assign deal_end_time = product.metafields.custom.countdown_end %}
{% else %}
  {% assign deal_end_time = '2025-03-01T23:59:59Z' %}
{% endif %}

<div id="countdown-timer"
     data-deal-end-time="{{ deal_end_time | date: '%Y/%m/%d %H:%M:%S' }}">
</div>

‍

JavaScript for Countdown Timer

javascript:

<script>
  (function() {
    const countdownElement = document.getElementById('countdown-timer');
    const dealEndTimeStr = countdownElement.dataset.dealEndTime;
    const dealEndTime = new Date(dealEndTimeStr).getTime();

    function updateCountdown() {
      const now = new Date().getTime();
      const distance = dealEndTime - now;

      if (distance <= 0) {
        countdownElement.innerHTML = "Deal Closed";
        return;
      }

      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);

      countdownElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
    }

    setInterval(updateCountdown, 1000);
    updateCountdown();
  })();
</script>

This timer pulls its end time from a metafield and updates every second.

‍

‍

Integrating with Shopify’s APIs

For more advanced features, consider using Shopify’s Storefront or Ajax API to fetch live data, such as updated stock levels or customer reviews. Using JavaScript’s fetch or Axios library, you can request fresh data without a page reload.

‍

Example: Fetching Data with the Storefront API

javascript:

fetch('/api/storefront/products')
  .then(response => response.json())
  .then(data => {
    // Process data to update the UI
    console.log(data);
  })
  .catch(error => console.error('Error fetching data:', error));

Best Practices and Performance Considerations

• Debounce and Throttle:
  For input events (e.g., search filters), use debounce techniques to reduce the frequency of function calls.
• Efficient DOM Manipulation:
  Batch updates and minimize reflows for smoother performance.
• Graceful Error Handling:
  Always provide fallbacks or error messages if data cannot be retrieved.

‍

Conclusion

By leveraging JavaScript and JSON, you can transform your Shopify store into a dynamic, interactive platform. From real-time product filtering to countdown timers that create urgency, these techniques enhance user engagement and improve the overall shopping experience. Following best practices ensures that your dynamic features are efficient, maintainable, and provide a seamless experience for your users.

‍

About UNHYDE®

UNHYDE is a Munich-based web development agency dedicated to pushing boundaries in web development, user experience, and digital marketing. Our mission is to create high-performing digital platforms that drive meaningful customer engagement and measurable business growth. We operate internationally and are a recognized Shopify Partner agency, having successfully launched countless websites and webstores worldwide.

‍

We're here to help !

For more insights or if you're ready to take your website to the next level, feel free to reach out to us at UNHYDE®, the web design agency. We’re always here to collaborate and craft tailored solutions that meet your unique needs.