How To Show Recent Sales Pop Up Notifications In Shopify (Without Apps) - eCommerce Thesis How To Show Recent Sales Pop Up Notifications in Shopify

How To Show Recent Sales Pop Up Notifications In Shopify (Without Apps)

Meta Description:
Learn how to add recent sales pop-up notifications in Shopify without apps. Boost trust, create urgency, and increase your store’s conversions with step-by-step guidance.


Introduction

If you want to show recent sales pop-up notifications in Shopify without using any apps, this guide will help you. Adding real-time sales notifications builds trust, encourages quick purchases, and can improve your store’s conversion rate. By the end of this tutorial, you’ll know exactly how to set it up on your Shopify store.


Why Show Recent Sales Pop-Up Notifications

  • Build Trust: Show customers that other people are buying your products.
  • Create Urgency: Encourage faster purchase decisions.
  • Increase Conversions: Social proof reduces hesitation and increases sales.

For more tips, check our Shopify Theme Customization Guide.


Option 1: Using a Shopify App (Recommended for Non-Coders)

Popular apps for recent sales pop-ups include:

  • Sales Pop – Recent Sales Popup
  • FOMO: Social Proof & Urgency
  • Trust: Sales Pop Up & Countdown

Steps:

  1. Install the app from the Shopify App Store.
  2. Set up the pop-up appearance and timing.
  3. Preview your store to see live notifications.

Option 2: Manual Code Implementation

If you don’t want to use apps, you can manually add this code to your Dawn theme:

<script>
const products = [
  { name: 'Organic Cotton T-Shirt', price: '$29.99', city: 'New York', time: '2 minutes ago' },
  { name: 'Wireless Headphones', price: '$89.99', city: 'Los Angeles', time: '5 minutes ago' }
];

function showSale() {
  const randomProduct = products[Math.floor(Math.random() * products.length)];
  const notification = document.createElement('div');
  notification.className = 'sales-notification';
  notification.innerHTML = `<p>Someone from ${randomProduct.city} purchased ${randomProduct.name} for ${randomProduct.price} ${randomProduct.time}</p>`;
  document.body.appendChild(notification);
  setTimeout(() => notification.remove(), 5000);
}

setTimeout(showSale, 10000);
setInterval(showSale, Math.random() * 20000 + 20000);
</script>

<style>
.sales-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-size: 14px;
  z-index: 9999;
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn { from {opacity:0; transform: translateY(20px);} to {opacity:1; transform: translateY(0);} }
</style>

Option 3: Dynamic Recent Sales Notifications (Advanced)

For real orders using Shopify Metafields:

  1. Create a Metafield
    Go to Shopify Admin → Settings → Custom Data → Metafields.
    • Name: recent_orders_notifications
    • Namespace & Key: global.recent_orders
    • Type: JSON
  2. Automate Updates
    Use Shopify Flow (Plus) or a Metafields App to update the metafield dynamically with new orders.
  3. Add Snippet in Dawn Theme
    Create a snippet recent-sales-notification.liquid and paste:
{%- assign recent_orders = shop.metafields.global.recent_orders.value -%}
{%- if recent_orders -%}
<div class="sales-notification-wrapper">
  <div class="sales-notification">
    <p>🛒 Someone from {{ recent_orders.city }} purchased {{ recent_orders.product_title }} for {{ recent_orders.price }} ({{ recent_orders.time }})</p>
  </div>
</div>
{%- endif -%}
  1. Include Snippet in theme.liquid
    Just before </body> add: {% render 'recent-sales-notification' %}

Testing & Customization

  • Test on live or dummy orders.
  • Adjust colors, timing, and placement in CSS.
  • Make sure it looks good on mobile devices.

FAQs

Q: Do I need an app for recent sales notifications?
A: No, you can manually code it or use Shopify Metafields.

Q: Can it boost conversions?
A: Yes, social proof creates urgency and trust.

Q: Is it safe to show real customer data?
A: Only show city or anonymized info, not full names.


SEO-Optimized Images

Example Alt Texts:

Shopify Dawn theme real-time sales alert

Recent sales pop-up notification on Shopify product page

Dynamic Shopify sales notification popup

https://www.youtube.com/watch?v=P4zv1aQ6J34

eCommerce-Thesis

Shopify Theme Customization Guide

Shopify Apps for Social Proof