How To Add X Amount Of People Are Viewing This Product In Shopify

How To Add X Amount Of People Are Viewing This Product In Shopify

Want to create a sense of urgency and social proof in your Shopify store? Learn how to effortlessly display a live counter showing how many people are currently viewing your product. This simple yet effective technique can significantly boost conversions and make your products appear more desirable.

Benefits:

  • Increase urgency: Create a sense of scarcity and encourage immediate purchases.
  • Improve social proof: Leverage peer pressure to influence buying decisions.
  • Enhance credibility: Demonstrate product popularity and trustworthiness.

#Shopify #ecommerce #socialproof #conversionoptimization #digitalmarketing

Step:1 Create a file name: people-are-viewing.liquid under snippet folder

Step 2: Copy the below code and paste it into people-are-viewing.liquid

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Minimum view count
    var minViews = 30;
    // Maximum view count
    var maxViews = 99;
    // Number of people viewing this product
    var viewCount = Math.floor(Math.random() * (maxViews - minViews) + minViews);
    // Text after the view count
    var text = 'people are viewing this product right now.';
 
    // Create the new element to display on the page
    var $viewCountElement = document.createElement('div');
    $viewCountElement.className = 'custom-view-count';
 
    // Create inner HTML structure
    $viewCountElement.innerHTML = `
        <div class="icon">
            <div class="circle"></div>
        </div>
        <div class="text rainbow">
            <span class="count">${viewCount}</span> People are viewing this product right now!
            <div class="verified">✔ verified by eCommerce Thesis</div>
        </div>
    `;
 
    // Determine where to put the new element
    var $form = document.querySelector('product-form');
    var $pickupOptions = document.querySelector('pickup-availability');
    if ($pickupOptions) {
        // Insert our view count element before the pickup options
        $pickupOptions.parentElement.insertBefore($viewCountElement, $pickupOptions);
    } else if ($form) {
        // If no pickup options, place it at the end of the product form
        $form.appendChild($viewCountElement);
    }
});
</script>

<style>

.custom-view-count {
    /* display: flex; */
    align-items: center;
    /* padding: 10px 20px; */
    background-color: #F4F6F8;
    /* border-radius: 12px; */
    box-shadow: 0px 10px 350px 10px #00000047;
    color: #212B36;
    /* margin: 20px 0; */
    /* font-size: 16px; */
}
 
.custom-view-count .icon {
    margin-right: 15px;
}
 
.custom-view-count .icon .circle {
    width: 40px;
    height: 40px;
    background-color: #0094FF;
    border-radius: 50%;
    position: relative;
}
 
.custom-view-count .icon .circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background-color: #F4F6F8;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
 
.custom-view-count .text {
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
}
 
.custom-view-count .text .count {
    font-size: 26px;
    font-weight: bold;
    color: #006fbb;
    font-family: 'Inter';
}
 
.custom-view-count .text .verified {
    font-size: 12px;
    color: #108315;
    margin-top: 5px;
}





.rainbow {
    /* width: 400px; */
    /* height: 300px; */
    /* border-radius: 10px; */
    /* padding: 2rem; */
    /* margin: auto; */
    display: grid;
    place-content: center;
    text-align: center;
    /* font-size: 1.5em; */
    --border-size: 0.3rem;
    border: var(--border-size) solid transparent;
    border-image: conic-gradient(
      from var(--angle),
      #d53e33 0deg 90deg,
      #fbb300 90deg 180deg,
      #377af5 180deg 270deg,
      #399953 270deg 360deg
    )
    1 stretch;
    background: rgb(255 255 255 / var(--opacity));
}

@property --opacity {
  syntax: "<number>";
  initial-value: 0.5;
  inherits: false;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes opacityChange {
  to {
    --opacity: 1;
  }
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

.rainbow {
  animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
}


</style>

Add this line of code to theme.liquid file under the layout folder

{%- render 'people-are-viewing' -%}