{"id":25946,"date":"2026-03-02T11:00:00","date_gmt":"2026-03-02T05:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=25946"},"modified":"2026-02-27T14:07:19","modified_gmt":"2026-02-27T08:37:19","slug":"how-to-add-a-popup-to-a-shopify-store","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-a-popup-to-a-shopify-store\/","title":{"rendered":"How to Add a Popup to a Shopify Store? Simple Guide"},"content":{"rendered":"\n

Shopify popups are an effective sales technique to convert shoppers into loyal customers. This guide walks you through how to add a pop-up to a Shopify store in the easiest way possible. <\/p>\n\n\n\n

Popular Popups to Add in Shopify<\/h2>\n\n\n\n

Depending on your current goal, you can choose a popup that matches your customer’s journey. Here are the most effective and popular types of popups in Shopify:<\/p>\n\n\n\n

Popup Type<\/strong><\/td>Core Purpose<\/strong><\/td>Best Use Case<\/strong><\/td><\/tr>
Recent Sales <\/td>Build social proof and urgency.<\/td>Showing real-time purchases to validate the brand.<\/td><\/tr>
Discount Code<\/td>Drive immediate conversions.<\/td>Welcoming new visitors or offering a “last-minute” deal.<\/td><\/tr>
Newsletter \/ Email Signup<\/td>Lead generation and list growth.<\/td>Offering value (guides, early access) in exchange for contact info.<\/td><\/tr>
Exit-Intent<\/td>Reduce bounce rates.<\/td>Triggering a message just as a visitor\u2019s cursor leaves the page.<\/td><\/tr>
Free Shipping<\/td>Increase Average Order Value (AOV).<\/td>Highlighting spend thresholds (e.g., “Spend $10 more for free shipping”).<\/td><\/tr>
Announcement<\/td>Directing traffic to specific info.<\/td>Promoting store-wide sales, restocks, or holiday updates.<\/td><\/tr>
Cart Abandonment<\/td>Recovering lost revenue.<\/td>Nudging users to finish checkout before they close the tab.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

While every type listed above has its place in a healthy marketing strategy, sales popups are the most used by Shopify store owners because they provide instant credibility to new visitors. <\/p>\n\n\n\n

In the rest of this blog, I will show you exactly how to set them up and optimize them for your store like the one below: <\/p>\n\n\n

\n
\"Example<\/figure>\n<\/div>\n\n\n

How to Create a Sales Popup in Shopify via Custom Code <\/h2>\n\n\n\n

You can create a custom code for a sales pop-up and add it to your theme file. <\/p>\n\n\n\n

This gives you the freedom to customize the design of the popup but requires developers if you are not a technical person.<\/p>\n\n\n\n

Follow these steps carefully to add a sales popup in Shopify. <\/p>\n\n\n\n

Head to your Shopify admin panel, go to Online Store > Themes > Edit Code<\/strong>.<\/p>\n\n\n\n

Open Layout > theme.liquid<\/strong>, then scroll to the very bottom and paste this code right above the <\/body><\/strong> tag.<\/p>\n\n\n\n

Replace the src URL in the <img> tag with the link to your most popular product image to display it in the pop-up.<\/p>\n\n\n\n

<div id=\"simple-sales-popup\" style=\"display: none; position: fixed; bottom: 20px; left: 20px; background: white; border: 1px solid #ddd; padding: 12px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 9999; width: 260px; font-family: sans-serif; align-items: center;\">\n  <div style=\"margin-right: 12px;\">\n    <img src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0533\/2089\/files\/placeholder-images-image_60x60_crop_center.png\" id=\"popup-img\" style=\"width: 50px; height: 50px; border-radius: 4px; object-fit: cover;\">\n  <\/div>\n  <div>\n    <p style=\"margin: 0; font-size: 13px; font-weight: bold; color: #333;\">Someone in <span id=\"popup-city\">New York<\/span><\/p>\n    <p style=\"margin: 2px 0; font-size: 12px; color: #666;\">purchased <span id=\"popup-item\">a Best Seller<\/span><\/p>\n    <small style=\"font-size: 10px; color: #999;\">Verified by Shop<\/small>\n  <\/div>\n  <button onclick=\"document.getElementById('simple-sales-popup').style.display='none'\" style=\"position: absolute; top: 5px; right: 5px; background: none; border: none; cursor: pointer; color: #aaa;\">&times;<\/button>\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function() {\n    const popup = document.getElementById('simple-sales-popup');\n    const cities = [\"New York\", \"London\", \"Los Angeles\", \"Chicago\", \"Sydney\", \"Toronto\"];\n    \n    setTimeout(() => {\n      document.getElementById('popup-city').innerText = cities[Math.floor(Math.random() * cities.length)];\n      \n      popup.style.display = 'flex';\n    }, 5000);\n\n    setTimeout(() => {\n      popup.style.display = 'none';\n    }, 12000);\n  });\n<\/script><\/pre>\n\n\n\n
Save the file and preview it in the frontend, and this is how it will look (simple & basic).
<\/p>\n\n\n
\n
\"Preview<\/figure>\n<\/div>\n\n\n
Though adding a popup via code is free of cost, it comes with some fallbacks you must know.<\/p>\n\n\n\n
Pulling actual, real-time sales data requires connecting to Shopify\u2019s Admin API. This is significantly more complex to code than a basic popup and requires a secure way to handle your store\u2019s private data.<\/p>\n\n\n\n
This fake sales notification on Shopify<\/a> can negatively impact your branding.<\/p>\n\n\n\n
Secondly, when Shopify updates its core Liquid or JavaScript libraries, custom code can stop working or break other parts of your store (like the “Add to Cart” button).<\/p>\n\n\n\n
Steps Using the Meetanshi Recent Sales Popup Shopify App<\/h2>\n\n\n\n
Instead of handling everything through manual coding, you can use the Meetanshi Recent Sales Popup app, which shows real-time sales popup extracting the data from your recent orders.<\/p>\n\n\n
\n
\"Meetanshi<\/figure>\n<\/div>\n\n\n
Let\u2019s understand the app working with easy steps.<\/p>\n\n\n\n
Step 1: Configure the Popup Setting <\/h3>\n\n\n\n
Install the Meetanshi Recent Sales Popup<\/a> app and enable it in your theme.<\/p>\n\n\n\n
From the app dashboard, go to the Popup behaviour<\/strong> and toggle on Active<\/strong> Sales Popup. Then configure the data you want to show:
<\/p>\n\n\n\n
Orders for specific high-priority products<\/p>\n\n\n\n
Orders placed in the last X days<\/p>\n\n\n\n
The last X number of orders<\/p>\n\n\n
\n
\"Configure<\/figure>\n<\/div>\n\n\n
You can also set:<\/p>\n\n\n\n