Custom Liquid Codes for Shopify Website Modeifications
One-click copy function for coupon code
Follow these Steps to create like above;
1) right click and select inspect
2) select cursor arrow 
or 
from the left of header panel in inspect element.
3) Hover over the mouse to 🎟️ Save 10% with.. and select.
4) From the selected element, right click and copy the code
5) Paste the code in custom liquid section of the shopify website.
6) Make necessary changes to your coupon code and expiry date in the code.
7) Also add this script below the code in the same custom liquid section to activate the copy function.
<script>
function copyCoupon() {
var couponText = document.getElementById(“couponCode”).innerText;
navigator.clipboard.writeText(couponText).then(() => {
alert(“Coupon code copied: ” + couponText);
});
}
</script>
Watch this youtube video for step by step video instruction guide.
Free Shipping Bar
<script>
document.addEventListener(“DOMContentLoaded”, function () {
function updateFreeShippingBar() {
fetch(‘/cart.js’)
.then(response => response.json())
.then(data => {
let cartTotal = data.total_price / 100; // Convert cents to dollars
let threshold = 50; // Free shipping threshold
let message = “”;
if (cartTotal >= threshold) {
message = “🎉 Congratulations! You qualify for FREE shipping!”;
} else {
let remaining = threshold – cartTotal;
message = `🚀 You’re only $${remaining.toFixed(2)} away from Free Shipping!`;
}
document.getElementById(“free-shipping-bar”).innerText = message;
});
}
function checkCustomerLocation() {
fetch(‘https://ipapi.co/json/’) // External API to get location
.then(response => response.json())
.then(data => {
if (data.country_code === “AU”) {
document.getElementById(“free-shipping-bar”).style.display = “block”;
updateFreeShippingBar();
setInterval(updateFreeShippingBar, 2000);
} else {
document.getElementById(“free-shipping-bar”).style.display = “none”;
}
})
.catch(error => console.error(“Error fetching location: “, error));
}
checkCustomerLocation();
});
</script>
<style>
#free-shipping-bar {
background-color: #ffcc00;
color: #333;
padding: 10px;
text-align: center;
font-weight: bold;
display: none; /* Initially hidden */
}
</style>
<div id=”free-shipping-bar”></div>
Real time viewers with dynamic data on the product page
<div id=”visitor-count-message”
style=”display: none; font-weight: bold; font-size: 16px;
color: #FF4500; background: #FFF4E5; padding: 8px 12px;
border-radius: 5px; text-align: left; margin-top: 10px;
width: fit-content;”>
</div>
<script>
document.addEventListener(“DOMContentLoaded”, function () {
const productId = “{{ product.id }}”; // Get current product ID
const now = new Date().getTime(); // Current timestamp
const visitorKey = “product_visits_” + productId;
// Get visits data from local storage
let visits = JSON.parse(localStorage.getItem(visitorKey)) || [];
// Remove visits older than 24 hours
visits = visits.filter(timestamp => now – timestamp < 24 * 60 * 60 * 1000);
// Add current visit
visits.push(now);
localStorage.setItem(visitorKey, JSON.stringify(visits));
let visitorCount = visits.length;
// If actual visitors < 3, show a random number between 2-9
if (visitorCount < 3) {
visitorCount = Math.floor(Math.random() * (9 – 2 + 1)) + 2; // Random number between 2-7
}
// Set message text
const message = ⚡ ${visitorCount} people viewed this item in today.;
// Show the message
const messageElement = document.getElementById(“visitor-count-message”);
messageElement.innerText = message;
messageElement.style.display = “block”;
});
</script>
🔥 How above code Works
Tracks real-time visits (removes visits older than 24 hrs).
If real visits are ≥ 3, shows the actual visit count.
If real visits are < 3, displays a random number (2–9) to create urgency.
Displays the message dynamically on the product page.
Here are some short and urgent variations:
🔥 X people viewed this in the last 24 hrs!
⏳ X shoppers checked this out today!
🚀 X people just visited—selling fast!
👀 X people viewed this in 24 hrs!
⚡ Hurry! X views in the last day!
📢 X others are eyeing this now!
🏃 X people viewed this today—Act fast!
🚨 Trending! X views in the past 24 hrs!
Real time viewers on the product page - No data if no visits
<div id=”visitor-count-message”
style=”display: none; font-weight: bold; font-size: 16px;
color: #FF4500; background: #FFF4E5; padding: 8px 12px;
border-radius: 5px; text-align: left; margin-top: 10px;
width: fit-content;”>
</div>
<script>
document.addEventListener(“DOMContentLoaded”, function () {
const productId = “{{ product.id }}”; // Get current product ID
const productInStock = {{ product.available | json }}; // Check if product is in stock
const now = new Date().getTime(); // Current timestamp
const visitorKey = “product_visits_” + productId;
// Get visits data from local storage
let visits = JSON.parse(localStorage.getItem(visitorKey)) || [];
// Remove visits older than 24 hours
visits = visits.filter(timestamp => now – timestamp < 24 * 60 * 60 * 1000);
// Add current visit
visits.push(now);
localStorage.setItem(visitorKey, JSON.stringify(visits));
let visitorCount = visits.length;
// Only show the message if the product is in stock AND has more than 1 visit
if (productInStock && visitorCount > 1) {
const message = `⚡ ${visitorCount} people viewed this today.`;
// Show the message
const messageElement = document.getElementById(“visitor-count-message”);
messageElement.innerText = message;
messageElement.style.display = “block”;
}
});
</script>
🔹 What This Update Does:
✅ Tracks real-time visits for the last 24 hours
✅ Only displays the notification if more than 1 person has visited the product
✅ If there is only 1 or 0 visits, no message is shown
✅ The visitor count is displayed only if the product is in stock
To create strong urgency, you want a short, punchy, and action-driven message. Here are some optimized versions:
🔥 Best Urgency Phrases for Your Message:
“⚡ X people viewed today—Selling fast!”
“🔥 X shoppers checked this out—Act now!”
“🚨 X people viewed today—In demand!”
“⏳ X people interested—Limited stock!”
“🚀 X people viewed—Going fast!”
“⚡ X views today—Almost gone!”
“🏃 X others are eyeing this—Hurry!”