{"id":7333,"date":"2025-10-01T18:18:11","date_gmt":"2025-10-01T18:18:11","guid":{"rendered":"https:\/\/impulsebyte.com\/blogs\/?p=7333"},"modified":"2025-10-03T11:27:06","modified_gmt":"2025-10-03T11:27:06","slug":"how-to-add-dynamic-urgency-messages-to-your-shopify-store-complete-code-guide","status":"publish","type":"post","link":"https:\/\/impulsebyte.com\/blogs\/shopify\/how-to-add-dynamic-urgency-messages-to-your-shopify-store-complete-code-guide\/","title":{"rendered":"How to Add Dynamic Urgency Messages to Your Shopify Store: Complete Code Guide"},"content":{"rendered":"\n<p>E-commerce stores constantly seek ways to increase conversions and reduce cart abandonment. One of the most effective psychological triggers is creating urgency through social proof messages that show recent purchase activity. This comprehensive guide will show you how to implement a dynamic urgency message system for your Shopify store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"understanding-the-psychology-behind-urgency-messag\">Understanding the Psychology Behind Urgency Messages<\/h2>\n\n\n\n<p>Urgency messages work by leveraging several psychological principles. Social proof demonstrates that other customers are actively purchasing the product, validating the buyer&#8217;s decision. Scarcity creates fear of missing out (FOMO), encouraging immediate action rather than delayed consideration. Time pressure overrides rational deliberation, pushing customers toward quick purchasing decisions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-complete-implementation-code\">The Complete Implementation Code<\/h2>\n\n\n\n<p>Here&#8217;s the complete code solution for adding dynamic urgency messages to your Shopify product pages:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Structure<br><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!-- Add this inside the product-details div -->\n&lt;div class=\"urgency-message\" data-product-id=\"{{ product.id | default: 'default' }}\">\n  &lt;div class=\"urgency-content\">\n    &lt;span class=\"urgency-icon\">\ud83d\udd25&lt;\/span>\n    &lt;span class=\"urgency-text\">\n      Hurry Up!! Item Selling Fast, \n      &lt;span class=\"order-count\" data-base=\"11\">&lt;\/span>+ orders in last 10 days\n    &lt;\/span>\n  &lt;\/div>\n  &lt;div class=\"urgency-animation\">&lt;\/div>\n&lt;\/div>\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A9955\">&lt;!-- Add this inside the product-details div --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;urgency-message&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">data-product-id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;{{ product.id | default: &#39;default&#39; }}&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;urgency-content&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;urgency-icon&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\ud83d\udd25<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;urgency-text&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      Hurry Up!! Item Selling Fast, <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;order-count&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">data-base<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;11&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">+ orders in last 10 days<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;urgency-animation&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript Implementation<\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Urgency message functionality\n  function initUrgencyMessages() {\n    const urgencyMessages = document.querySelectorAll('.urgency-message');\n    \n    urgencyMessages.forEach(message => {\n      const orderCountElement = message.querySelector('.order-count');\n      const productId = message.dataset.productId;\n      const baseCount = parseInt(orderCountElement.dataset.base) || 11;\n      \n      \/\/ Generate or retrieve stored count for this product\n      function getStoredCount() {\n        const storageKey = `urgency_count_${productId}`;\n        const stored = localStorage.getItem(storageKey);\n        \n        if (stored) {\n          const data = JSON.parse(stored);\n          const now = new Date().getTime();\n          const sixteenHours = 16 * 60 * 60 * 1000; \/\/ 16 hours in milliseconds\n          \n          \/\/ Check if 16 hours have passed\n          if (now - data.timestamp &lt; sixteenHours) {\n            return data.count;\n          }\n        }\n        \n        \/\/ Generate new random count between 201-270\n        const newCount = Math.floor(Math.random() * (90 - 11 + 1)) + 11;\n        const newData = {\n          count: newCount,\n          timestamp: new Date().getTime()\n        };\n        \n        localStorage.setItem(storageKey, JSON.stringify(newData));\n        return newCount;\n      }\n      \n      \/\/ Set the count\n      const currentCount = getStoredCount();\n      orderCountElement.textContent = currentCount;\n      \n      \/\/ Add some random color variation\n      const colors = &#91;'', 'orange', 'red', 'purple'&#93;;\n      const randomColor = colors&#91;Math.floor(Math.random() * colors.length)&#93;;\n      if (randomColor) {\n        message.classList.add(randomColor);\n      }\n    });\n  }\n  \n  \/\/ Initialize urgency messages\n  initUrgencyMessages();\n  \n  \/\/ Optional: Add click effect\n  document.querySelectorAll('.urgency-message').forEach(message => {\n    message.addEventListener('click', function() {\n      this.style.transform = 'scale(0.98)';\n      setTimeout(() => {\n        this.style.transform = '';\n      }, 150);\n    });\n  });\n});\n\n\/\/ Alternative: More sophisticated number animation\nfunction animateNumberChange(element, newNumber) {\n  const oldNumber = parseInt(element.textContent);\n  const duration = 1000; \/\/ 1 second\n  const steps = 20;\n  const increment = (newNumber - oldNumber) \/ steps;\n  \n  let step = 0;\n  const timer = setInterval(() => {\n    step++;\n    const currentNumber = Math.round(oldNumber + (increment * step));\n    element.textContent = currentNumber;\n    \n    if (step >= steps) {\n      clearInterval(timer);\n      element.textContent = newNumber;\n    }\n  }, duration \/ steps);\n}\n&lt;\/script>\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">document.addEventListener(&#39;DOMContentLoaded&#39;, function() <\/span><span style=\"color: #569CD6\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ Urgency message functionality<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">initUrgencyMessages<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">urgencyMessages<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">querySelectorAll<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;.urgency-message&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">urgencyMessages<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">forEach<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">orderCountElement<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">querySelector<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;.order-count&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">productId<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">dataset<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">productId<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">baseCount<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">parseInt<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">orderCountElement<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">dataset<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">base<\/span><span style=\"color: #D4D4D4\">) || <\/span><span style=\"color: #B5CEA8\">11<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #6A9955\">\/\/ Generate or retrieve stored count for this product<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">getStoredCount<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">storageKey<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">`urgency_count_<\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">productId<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">stored<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">localStorage<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getItem<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">storageKey<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">stored<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">data<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #4FC1FF\">JSON<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">parse<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">stored<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">now<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Date<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">getTime<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">sixteenHours<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">16<\/span><span style=\"color: #D4D4D4\"> * <\/span><span style=\"color: #B5CEA8\">60<\/span><span style=\"color: #D4D4D4\"> * <\/span><span style=\"color: #B5CEA8\">60<\/span><span style=\"color: #D4D4D4\"> * <\/span><span style=\"color: #B5CEA8\">1000<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #6A9955\">\/\/ 16 hours in milliseconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #6A9955\">\/\/ Check if 16 hours have passed<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">now<\/span><span style=\"color: #D4D4D4\"> - <\/span><span style=\"color: #9CDCFE\">data<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">timestamp<\/span><span style=\"color: #D4D4D4\"> &lt; <\/span><span style=\"color: #9CDCFE\">sixteenHours<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">data<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">count<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ Generate new random count between 201-270<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">newCount<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">Math<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">floor<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">Math<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">random<\/span><span style=\"color: #D4D4D4\">() * (<\/span><span style=\"color: #B5CEA8\">90<\/span><span style=\"color: #D4D4D4\"> - <\/span><span style=\"color: #B5CEA8\">11<\/span><span style=\"color: #D4D4D4\"> + <\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\">)) + <\/span><span style=\"color: #B5CEA8\">11<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">newData<\/span><span style=\"color: #D4D4D4\"> = {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #9CDCFE\">count:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">newCount<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #9CDCFE\">timestamp:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Date<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">getTime<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">localStorage<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">setItem<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">storageKey<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">JSON<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">stringify<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">newData<\/span><span style=\"color: #D4D4D4\">));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">newCount<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #6A9955\">\/\/ Set the count<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">currentCount<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">getStoredCount<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">orderCountElement<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">textContent<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">currentCount<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #6A9955\">\/\/ Add some random color variation<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">colors<\/span><span style=\"color: #D4D4D4\"> = &#91;<\/span><span style=\"color: #CE9178\">&#39;&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&#39;orange&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&#39;red&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&#39;purple&#39;<\/span><span style=\"color: #D4D4D4\">&#93;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">randomColor<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">colors<\/span><span style=\"color: #D4D4D4\">&#91;<\/span><span style=\"color: #9CDCFE\">Math<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">floor<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">Math<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">random<\/span><span style=\"color: #D4D4D4\">() * <\/span><span style=\"color: #9CDCFE\">colors<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">length<\/span><span style=\"color: #D4D4D4\">)&#93;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">randomColor<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">classList<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">add<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">randomColor<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ Initialize urgency messages<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #DCDCAA\">initUrgencyMessages<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ Optional: Add click effect<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">querySelectorAll<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;.urgency-message&#39;<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #DCDCAA\">forEach<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">addEventListener<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;click&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">style<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">transform<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#39;scale(0.98)&#39;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #DCDCAA\">setTimeout<\/span><span style=\"color: #D4D4D4\">(() <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">style<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">transform<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#39;&#39;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      }, <\/span><span style=\"color: #B5CEA8\">150<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">}<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\/\/ Alternative: More sophisticated number animation<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">function animateNumberChange(element, newNumber) <\/span><span style=\"color: #569CD6\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">oldNumber<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">parseInt<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">element<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">textContent<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">duration<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">1000<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #6A9955\">\/\/ 1 second<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">steps<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">20<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">increment<\/span><span style=\"color: #D4D4D4\"> = (<\/span><span style=\"color: #9CDCFE\">newNumber<\/span><span style=\"color: #D4D4D4\"> - <\/span><span style=\"color: #9CDCFE\">oldNumber<\/span><span style=\"color: #D4D4D4\">) \/ <\/span><span style=\"color: #9CDCFE\">steps<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">step<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">timer<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">setInterval<\/span><span style=\"color: #D4D4D4\">(() <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">step<\/span><span style=\"color: #D4D4D4\">++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">currentNumber<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">Math<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">round<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">oldNumber<\/span><span style=\"color: #D4D4D4\"> + (<\/span><span style=\"color: #9CDCFE\">increment<\/span><span style=\"color: #D4D4D4\"> * <\/span><span style=\"color: #9CDCFE\">step<\/span><span style=\"color: #D4D4D4\">));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">element<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">textContent<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">currentNumber<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">step<\/span><span style=\"color: #D4D4D4\"> &gt;= <\/span><span style=\"color: #9CDCFE\">steps<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #DCDCAA\">clearInterval<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">timer<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">element<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">textContent<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">newNumber<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }, <\/span><span style=\"color: #9CDCFE\">duration<\/span><span style=\"color: #D4D4D4\"> \/ <\/span><span style=\"color: #9CDCFE\">steps<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-the-system-works\">How the System Works<\/h2>\n\n\n\n<p>The urgency message system operates through several intelligent mechanisms. Each product gets a unique identifier that tracks its individual urgency count. The system uses localStorage to maintain consistency for returning visitors, showing the same count for 16 hours before generating a new random number. This prevents the message from appearing fake while maintaining believability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"implementation-steps\">Implementation Steps<\/h2>\n\n\n\n<p>First, locate your product template file in your Shopify theme, typically found in <code>sections\/product-form.liquid<\/code> or <code>templates\/product.liquid<\/code>. Add the HTML structure within your product details section, positioning it near the add-to-cart button for maximum visibility.<\/p>\n\n\n\n<p>Next, include the JavaScript code either in your theme&#8217;s main JavaScript file or directly in the product template within script tags. The code automatically initializes when the page loads and handles all the dynamic functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"customization-options\">Customization Options<\/h2>\n\n\n\n<p>The base count can be adjusted by modifying the <code>data-base<\/code> attribute in the HTML. The random range is controlled by changing the numbers in the Math.floor calculation. Color variations can be customized by modifying the colors array in the JavaScript.<\/p>\n\n\n\n<p>The 16-hour reset timer can be adjusted by changing the sixteenHours variable. For different time periods, multiply the desired hours by 60 * 60 * 1000 to get milliseconds.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"styling-recommendations\">Styling Recommendations<\/h2>\n\n\n\n<p>Add CSS to style the urgency message appropriately:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.urgency-message {\n  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);\n  color: white;\n  padding: 12px 16px;\n  border-radius: 8px;\n  margin: 16px 0;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.urgency-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.urgency-icon {\n  font-size: 18px;\n  animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.1); }\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.urgency-message<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">linear-gradient<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">135deg<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">#ff6b6b<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">#ff8e8e<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">white<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">padding<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">12px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">16px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">border-radius<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">8px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">margin<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">16px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">relative<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">overflow<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">hidden<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">cursor<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">pointer<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">transition<\/span><span style=\"color: #D4D4D4\">: transform <\/span><span style=\"color: #B5CEA8\">0.2s<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">ease<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.urgency-content<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">display<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">flex<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">align-items<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">center<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">gap<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">8px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.urgency-icon<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">font-size<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">18px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">animation<\/span><span style=\"color: #D4D4D4\">: pulse <\/span><span style=\"color: #B5CEA8\">2s<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">infinite<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C586C0\">@keyframes<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">pulse<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  0%, 100% { <\/span><span style=\"color: #9CDCFE\">transform<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">scale<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\">); }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  50% { <\/span><span style=\"color: #9CDCFE\">transform<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">scale<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">1.1<\/span><span style=\"color: #D4D4D4\">); }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"performance-considerations\">Performance Considerations<\/h2>\n\n\n\n<p>This implementation is lightweight and uses browser localStorage for persistence, avoiding server requests. The code runs only after the DOM loads, preventing interference with page loading speed. The random number generation happens client-side, ensuring fast execution without server dependencies.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"best-practices-for-success\">Best Practices for Success<\/h2>\n\n\n\n<p>Keep urgency messages realistic and aligned with your actual traffic volume. Test different base numbers and ranges to find what works best for your audience. Monitor conversion rates before and after implementation to measure effectiveness. Consider A\/B testing different message variations to optimize performance.<\/p>\n\n\n\n<p>This urgency message system provides an effective way to increase conversions while maintaining authenticity and performance. The dynamic nature prevents the messages from appearing static or fake, while the localStorage persistence ensures consistency for returning customers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>E-commerce stores constantly seek ways to increase conversions and reduce cart abandonment. One of the most effective psychological triggers is creating urgency through social proof messages that show recent purchase &hellip; <a title=\"How to Add Dynamic Urgency Messages to Your Shopify Store: Complete Code Guide\" class=\"hm-read-more\" href=\"https:\/\/impulsebyte.com\/blogs\/shopify\/how-to-add-dynamic-urgency-messages-to-your-shopify-store-complete-code-guide\/\"><span class=\"screen-reader-text\">How to Add Dynamic Urgency Messages to Your Shopify Store: Complete Code Guide<\/span>Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-7333","post","type-post","status-publish","format-standard","hentry","category-shopify"],"_links":{"self":[{"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/posts\/7333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/comments?post=7333"}],"version-history":[{"count":8,"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/posts\/7333\/revisions"}],"predecessor-version":[{"id":7349,"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/posts\/7333\/revisions\/7349"}],"wp:attachment":[{"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/media?parent=7333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/categories?post=7333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/impulsebyte.com\/blogs\/wp-json\/wp\/v2\/tags?post=7333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}