Introduction

In today’s competitive e-commerce landscape, data isn’t just a luxury—it’s a necessity. Shoppers are increasingly influenced by social proof, and displaying real-time metrics like product views or recent orders can significantly boost trust and conversions. In this post, we’ll explore how you can enhance your Shopify product pages by integrating a custom element that tracks and displays key product statistics. We’ll review existing apps that offer this functionality and dive into a custom approach for those looking to build a solution without relying on third-party integrations.

Example of a FOMO creating Analytics Element

Why Product Analytics Matter

Displaying dynamic product statistics—such as “Viewed 200 times in the last 24 hours” or “50 orders placed in the past day”—can create a sense of urgency and credibility. These metrics not only validate a product’s popularity but also tap into the psychology of social proof, encouraging potential customers to take action. When visitors see that many others are engaging with or purchasing a product, their confidence in making a purchase increases.

Leveraging Third-Party Apps for Instant Integration

If you’re looking for a quick and hassle-free solution, several Shopify apps already offer built-in functionalities to display product engagement metrics:

  • Fomo: Known for its social proof notifications, Fomo can display live updates on product views, recent purchases, and other customer actions. It’s a great choice if you want to instantly build trust with your visitors.
  • Sales Pop: This app provides real-time notifications of recent sales, which can be customized to show statistics such as the number of orders in the last 24 hours.
  • Notification X: Another popular option, Notification X offers various social proof features, including live tracking of product views and orders.

These apps are designed to integrate seamlessly with your Shopify store, offering a plug-and-play solution that doesn’t require extensive development work. However, while they save time and effort, they may not always offer the level of customization or branding consistency that a tailor-made solution can provide.

A Custom Approach: Building Your Own Analytics Element

For agencies or developers seeking full control over the design and functionality of their Shopify store, creating a custom tracking element is an attractive option. Below are some code examples to help illustrate how you can implement such a solution.

1. Tracking Product Views

Front-End Tracking with JavaScript

On your product page template, you can insert a JavaScript snippet that sends a request to a custom backend endpoint every time the page is loaded. For example:

html:

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Assuming your product id is available in the Liquid template
  var productId = "{{ product.id }}";
  
  // Send a POST request to your backend endpoint to track the view
  fetch('/apps/track-product-view?product_id=' + productId, {
    method: 'POST'
  })
  .then(response => {
    // Optionally handle the response
    console.log("View tracked");
  })
  .catch(error => console.error("Error tracking view:", error));
});
</script>

This snippet leverages Shopify’s Liquid templating to pass the product ID and uses the Fetch API to notify your backend. You could implement the endpoint using an app proxy or a serverless function hosted on platforms like AWS Lambda.

Displaying the View Count in Liquid

Once your backend updates the view count (for example, stored in a metafield), you can display it on the product page using Liquid:

liquid:

{% if product.metafields.analytics and product.metafields.analytics.view_count %}
  <p>Viewed {{ product.metafields.analytics.view_count }} times in the last 24 hours</p>
{% endif %}

This code checks if the metafield exists and outputs the view count accordingly.

2. Tracking Orders with Webhooks

To track orders for each product, you can set up a webhook in Shopify that triggers when an order is created. For example, using Node.js with Express, you could have:

javascript:

// Example: Express server to handle order webhooks
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/webhooks/order-created', (req, res) => {
  const order = req.body;

  // Loop through each line item in the order
  order.line_items.forEach(item => {
    const productId = item.product_id;
    // Update your custom order count for the product
    // For instance, increment the count in your database or update a Shopify metafield via the API
    console.log(`Order received for product ID: ${productId}`);
  });

  // Respond to acknowledge receipt of the webhook
  res.sendStatus(200);
});

app.listen(3000, () => console.log('Webhook listener running on port 3000'));

This simple Express setup listens for order creation events, extracts the relevant product IDs, and then you can implement your logic to update order counts in your chosen data store.

3. Integrating with the Shopify Theme Editor

For maximum flexibility, integrate your custom element with Shopify’s theme editor using JSON schemas. This allows store owners to adjust how statistics are displayed without touching the code. In your section file, you might include:

json:

{
  "name": "Product Analytics",
  "settings": [
    {
      "type": "text",
      "id": "analytics_heading",
      "label": "Analytics Heading",
      "default": "Product Engagement"
    },
    {
      "type": "range",
      "id": "view_threshold",
      "label": "Minimum Views to Display",
      "min": 0,
      "max": 500,
      "step": 10,
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "Product Analytics Block"
    }
  ]
}

This schema enables a customizable block where users can modify the heading and set a threshold for when to display the analytics data.

For more details on integrating dynamic objects into Shopify’s theme editor using JSON schemas, check out our blog post “Creating a Custom Section in Shopify with JSON Schema.”

Considerations for a Custom Build

  • Scalability and Performance: Ensure that your back-end solution can handle high traffic volumes without slowing down your site.
  • Data Accuracy and Privacy: Implement mechanisms to prevent inflated counts (e.g., filtering out bots) and ensure compliance with data privacy regulations.
  • User Experience: Seamlessly integrate the display of these statistics so that they enhance rather than distract from the overall shopping experience.

By building a custom solution, you have full control over the aesthetics and functionality, which is particularly beneficial for brands requiring a unique presentation or specific performance optimizations.

Conclusion

Whether you choose a third-party app like Fomo, Sales Pop, or Notification X for a quick setup, or decide to roll out your own custom solution, integrating product analytics into your Shopify store can make a big difference. It not only enhances social proof but also provides valuable insights into customer behavior. By harnessing the power of real-time data, you can create a more engaging shopping experience that drives both trust and conversions.

For those looking to further explore customizations within Shopify’s theme editor, be sure to check out our guide on using JSON schemas to create dynamic objects—an essential resource for taking your Shopify customization to the next level.

Happy coding, and here’s to boosting your store’s performance with data-driven design!

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.

READY. SET.

Launch

Today

get in touch

MAKE CONTACT

UNHYDE•UNHYDE•UNHYDE•UNHYDE•UNHYDE•UNHYDE•