kgkm

Custom Liquid Easy Tested - Shopify Store

Live Preview

Runs the saved Liquid code in a safe browser sandbox.

Preview ready

Testing note: This preview uses a browser-based simulator with sample Shopify data. It is not Shopify’s official Liquid runtime. Always verify the final snippet in a duplicate/development Shopify theme.

</>

Code

Copy the code you need and paste it into your Shopify theme.

Liquid Code

<div class="live-viewers">
  <span class="live-dot"></span>
  <span>
    <strong id="live-viewer-count">12</strong>
    people are viewing this product just now!
  </span>
</div>

<style>
  .live-viewers {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f5f9fc;
    border-radius: 8px;
    width: fit-content;
    font-size: 13px;
    color: #333;
  }

  .live-viewers strong {
    font-weight: 700;
  }

  .live-dot {
    width: 8px;
    height: 8px;
    background: #18b66a;
    border-radius: 50%;
    display: inline-block;
    animation: livePulse 1.5s infinite;
  }

  @keyframes livePulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: .45;
      transform: scale(.8);
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const viewerCount = document.getElementById("live-viewer-count");

    function updateViewers() {
      const numbers = [12, 18, 21, 25, 28, 32, 36, 42, 48, 50];
      const randomNumber = numbers[Math.floor(Math.random() * numbers.length)];

      viewerCount.textContent = randomNumber;
    }

    updateViewers();

    setInterval(updateViewers, 8000);
  });
</script>

▣ Required App

No app required. Works out of the box.

Important: The preview is a local simulator. Shopify theme versions, app blocks, section settings, metafields and Shopify-only objects can change the final result. Test the final code on a duplicate/development theme before publishing.