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

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

Posted on by Foysal

Adding Recent Sales Notification Pop-Up Alerts to Shopify Dawn Theme

To add recent sales notification pop-ups to your Shopify Dawn theme, you have a few options. Here’s how to implement this feature:

Option 1: Using a Shopify App (Recommended for non-coders)

  1. Install a sales notification app from the Shopify App Store:
    • Search for “Sales Pop” or “Recent Sales Notification” in the Shopify App Store
    • Popular options include:
      • Sales Pop ‑ Recent Sales Popup
      • FOMO: Social Proof & Urgency
      • Trust: Sales Pop Up & Countdown
  2. Follow the app’s installation instructions
  3. Configure the pop-up appearance and behavior in the app settings

Option 2: Manual Code Implementation

If you prefer to add this manually to your Dawn theme:

  1. Go to your Shopify admin → Online Store → Themes
  2. Click “Actions” → “Edit code” on your Dawn theme
  3. Add this code to your theme.liquid file just before the closing </body> tag:
<script>
  // Sample recent sales notification script
  document.addEventListener('DOMContentLoaded', function() {
    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' },
      { name: 'Stainless Steel Water Bottle', price: '$24.99', city: 'Chicago', time: '10 minutes ago' }
    ];
    
    function showRandomSale() {
      const randomProduct = products[Math.floor(Math.random() * products.length)];
      const notification = document.createElement('div');
      notification.className = 'sales-notification';
      notification.innerHTML = `
        <div class="sales-popup">
          <p>Someone from ${randomProduct.city} purchased ${randomProduct.name} for ${randomProduct.price} ${randomProduct.time}</p>
        </div>
      `;
      document.body.appendChild(notification);
      setTimeout(() => notification.remove(), 5000);
    }
    
    // Show first notification after 10 seconds
    setTimeout(showRandomSale, 10000);
    
    // Show subsequent notifications every 20-40 seconds
    setInterval(showRandomSale, Math.random() * 20000 + 20000);
  });
</script>

<style>
  .sales-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    animation: fadeIn 0.5s;
  }
  
  .sales-popup {
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 300px;
    font-size: 14px;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

Option 3: Using Shopify’s Dynamic Sources (More Advanced)

For real recent orders (requires Shopify Plus or custom development):

  1. Create a new snippet called recent-sales-notification.liquid
  2. Add your notification HTML/CSS/JS there
  3. Include it in your theme where needed with {% render 'recent-sales-notification' %}

Important Notes:

  • For real sales data (not simulated), you’ll need to use the Shopify Orders API or a third-party app
  • Be mindful of customer privacy – don’t show real customer names
  • Consider frequency to avoid annoying visitors
  • Test on mobile devices to ensure good responsiveness

Dynamic Recent Sales Notifications for Shopify Dawn Theme

(Using Shopify’s Dynamic Sources & Metafields)

This solution displays real recent orders (not fake data) using Shopify’s dynamic sources and metafields. It requires some manual setup but provides authentic social proof.

📌 Requirements

  1. Shopify Store (Plus recommended for full API access)
  2. Dawn Theme (or any Online Store 2.0 theme)
  3. Basic knowledge of Liquid & Shopify Admin

🛠 Step 1: Create a Metafield for Order Notifications

We’ll store recent order data in a metafield that updates dynamically.

  1. Go to:
    Shopify Admin → Settings → Custom Data → Metafields
  2. Add a new metafield definition:
    • Name: recent_orders_notifications
    • Namespace & Key: global.recent_orders
    • Type: JSON
    • Description: Stores recent orders for popup notifications

🔄 Step 2: Automate Order Data Updates (Using Shopify Flow or an App)

Option A: Using Shopify Flow (Shopify Plus Only)

  1. Go to: Shopify Admin → Settings → Shopify Flow
  2. Create a new workflow:
    • Trigger: Order created
    • Action: Update metafield (global.recent_orders)
    • JSON Structure:
{
  "product_title": "{{ order.line_items[0].title }}",
  "price": "{{ order.line_items[0].price | money }}",
  "city": "{{ order.shipping_address.city }}",
  "time": "Just now"
}
    • (Optional) Limit to last 5 orders (to avoid bloating the JSON).

Option B: Using a Shopify App (For Non-Plus Stores)

  • Use an app like “Metafields Editor” or “Order Notifications” to auto-update the metafield.

💻 Step 3: Add the Notification Popup to Dawn Theme

1. Create a New Snippet (recent-sales-notification.liquid)

Go to:
Shopify Admin → Themes → Edit Code → Snippets → Add new snippet

Paste this code:

{%- assign recent_orders = shop.metafields.global.recent_orders.value -%}

{%- if recent_orders -%}
  <div class="sales-notification-wrapper">
    <div class="sales-notification" data-notification>
      <p>
        <span class="notification-emoji">🛒</span>
        <strong>{{ recent_orders.city }}</strong> 
        purchased <strong>{{ recent_orders.product_title }}</strong> 
        for <strong>{{ recent_orders.price }}</strong> 
        <small>{{ recent_orders.time }}</small>
      </p>
    </div>
  </div>
{%- endif -%}

<style>
  .sales-notification-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
  }
  
  .sales-notification {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 280px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s forwards;
  }
  
  .sales-notification p {
    margin: 0;
    line-height: 1.4;
  }
  
  .notification-emoji {
    margin-right: 6px;
  }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const notification = document.querySelector('[data-notification]');
    
    if (notification) {
      // Show notification
      setTimeout(() => {
        notification.style.opacity = '1';
      }, 5000); // Delay first popup (5 sec)
      
      // Hide after 8 seconds
      setTimeout(() => {
        notification.style.opacity = '0';
        setTimeout(() => notification.remove(), 500);
      }, 13000);
      
      // Show again randomly (every 20-40 sec)
      setInterval(() => {
        if (!document.querySelector('[data-notification]')) {
          const newNotification = notification.cloneNode(true);
          document.querySelector('.sales-notification-wrapper').appendChild(newNotification);
          setTimeout(() => newNotification.style.opacity = '1', 100);
          setTimeout(() => {
            newNotification.style.opacity = '0';
            setTimeout(() => newNotification.remove(), 500);
          }, 8000);
        }
      }, Math.random() * 20000 + 20000);
    }
  });
</script>

2. Include the Snippet in theme.liquid

Add this just before </body> in theme.liquid:

{% render 'recent-sales-notification' %}

🚀 Step 4: Test & Customize

✅ Test on a real order – Place a test order to see if the popup appears.
⚙ Customize appearance – Adjust colors, timing, and position in the CSS.
📱 Mobile-friendly – Ensure it works well on all devices.

🔍 Troubleshooting

❌ No popup appearing?

  • Check if the metafield (global.recent_orders) has data.
  • Ensure the snippet is correctly included in theme.liquid.

❌ Old orders showing?

  • Update the metafield via Flow/app to keep data fresh.

🎉 Done!

Now your store will show real-time purchase notifications, increasing trust and conversions.