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' -%}