How To Show Number Of People Viewing Product

In this video, I’ll show you how to add a live visitor counter to your Shopify product pages—a simple but powerful scarcity hack to increase conversions.

• 🔹 What You’ll Learn:
• ✅ How to display a dynamic visitor count (even if it’s not real-time)
• ✅ Customize min/max visitor numbers, update speed & text
• ✅ Position the counter for maximum impact

Step 1:

Create a new snippet file ‘visitor-counter.liquid’ with the following code:

Copy Code

  <style>
    .live_visitors {
      position: relative;
      display: flex;
      align-items: center;
      gap: .5rem;
      padding-left: 13px;
      color: {{ block.settings.counter_text_color }};
      font-family: {{ block.settings.counter_font_family }};
      font-size: {{ block.settings.counter_font_size }}px;
    }
    .live_visitors::before {
      position: absolute;
      display: inline-block;
      content: "";
      width: 8px;
      height: 8px;
      margin-left: -14px;
      top: 0.6em;
      border-radius: 100%;
      background: currentColor;
      color: {{ block.settings.counter_dot_color }};
      box-shadow: 0 0 0 0 {{ block.settings.counter_dot_color }};
      animation: pulse-blue 2s infinite;
    }
    @keyframes pulse-blue {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 {{ block.settings.counter_dot_color | color_modify: 'alpha', 0.7 }};
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px {{ block.settings.counter_dot_color | color_modify: 'alpha', 0 }};
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 {{ block.settings.counter_dot_color | color_modify: 'alpha', 0 }};
      }
    }
  </style>
  <p class="live_visitors no-js-hidden">
    <span id="visitors_count"></span> {{ block.settings.counter_text }}
  </p>
  <script>
    let max_visitors = {{ block.settings.max_visitors }};
    let min_visitors = {{ block.settings.min_visitors }};
    let delay = {{ block.settings.update_delay }};
    let visitors_count = Math.floor(Math.random() * (max_visitors - min_visitors + 1) + min_visitors);
    document.getElementById("visitors_count").innerHTML = visitors_count;
    setInterval(function() {
      visitors_count = Math.floor(Math.random() * (max_visitors - min_visitors + 1) + min_visitors);
      document.getElementById("visitors_count").innerHTML = visitors_count;
    }, delay);
  </script>

Step 2:

Add schema code in main-product.liquid file above "type": "inventory"

Copy Code

{
      "type": "visitor-counter",
      "name": "Visitor Counter",
      "limit": 1,
      "settings": [
    {
      "type": "header",
      "content": "Visitor Counter Settings"
    },
    {
      "type": "number",
      "id": "min_visitors",
      "label": "Minimum Visitors",
      "default": 500
    },
    {
      "type": "number",
      "id": "max_visitors",
      "label": "Maximum Visitors",
      "default": 600
    },
    {
      "type": "number",
      "id": "update_delay",
      "label": "Update Delay (milliseconds)",
      "default": 4000
    },
    {
      "type": "text",
      "id": "counter_text",
      "label": "Counter Text",
      "default": "People are viewing right now."
    },
    {
      "type": "color",
      "id": "counter_text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "counter_dot_color",
      "label": "Indicator Dot Color",
      "default": "#21b646"
    },
    {
      "type": "select",
      "id": "counter_font_family",
      "label": "Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Theme Default"
        },
        {
          "value": "Arial, sans-serif",
          "label": "Arial"
        },
        {
          "value": "'Helvetica Neue', Helvetica, Arial, sans-serif",
          "label": "Helvetica"
        },
        {
          "value": "Georgia, serif",
          "label": "Georgia"
        },
        {
          "value": "'Times New Roman', Times, serif",
          "label": "Times New Roman"
        },
        {
          "value": "monospace",
          "label": "Monospace"
        }
      ],
      "default": "inherit"
    },
    {
      "type": "number",
      "id": "counter_font_size",
      "label": "Font Size (px)",
      "default": 16
    }
  ]
    },

Step 3:

Add the following code above {%- when 'inventory' -%} in main-product.liquid file

Copy Code

{%- when 'visitor-counter' -%}
              {% render 'visitor-counter' block: block %}