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