How To Create Sales Popup Notifications of Products in Shopify (Without Shopify Apps) Post author:Ramzan Post published:October 8, 2021 Post category:Shopify Post comments:0 Comments 1. Create section sales-popup-notifications.liquid <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script> <style> div.toastify { display: flex !important; justify-content: space-between; flex-direction: row-reverse; } img.toastify-avatar { width: 7.5rem !important; height: 7.5rem !important; } </style> {%- capture varNameArray -%} {%- for block in section.blocks -%} {%- assign product = block.settings.selectedProduct -%} {%- assign varName = product.handle | truncate: 8, "" | replace: '-', '_' -%} {{ '' | append: varName | append: ','}} {%- endfor -%} {%- endcapture -%} {% for block in section.blocks %} {% assign product = block.settings.selectedProduct %} <script> {% assign varName = product.handle | truncate: 8, "" | replace: '-', '_' %} let _{{ varName }} = Toastify({ text: "<p>Someone bought <b>{{ product.title | truncate: 25 }}</b></p>", duration: 3000, destination: "", newWindow: true, avatar: "{{ product.featured_image | img_url: 'medium'}}", close: true, gravity: "bottom", position: "left", backgroundColor: "white", style: {width: "400px", color: "black"}, stopOnFocus: true, escapeMarkup: false }); </script> {% endfor %} <script> var names = "{{ varNameArray | strip | strip_newlines }}"; let arrayNames = names.split(","); arrayNames.pop(); </script> <script> let timer = Math.random() * ({{ section.settings.maximumTime }} - {{ section.settings.minimumTime }}) - {{ section.settings.minimumTime }}; function showProductSale() { timer = Math.random() * ({{ section.settings.maximumTime }} - {{ section.settings.minimumTime }}) - {{ section.settings.minimumTime }}; eval("_" + arrayNames[Math.floor(Math.random() * (arrayNames.length - 0) - 0)] + ".showToast()"); setTimeout(showProductSale, timer); } setTimeout(showProductSale, timer); </script> {% schema %} { "name": "Sales Popup Notifications", "settings": [ { "type": "number", "id": "maximumTime", "default": 10000, "label": "Max Time" }, { "type": "number", "id": "minimumTime", "default": 0, "label": "Min Time" } ], "blocks": [ { "name": "Product", "type": "sales-product-popup", "settings": [ { "type": "product", "id": "selectedProduct", "label": "Product" } ] } ] } {% endschema %} {% stylesheet %} {% endstylesheet %} {% javascript %} {% endjavascript %} 2. Include {% section 'sales-popup-notifications' %} in theme.liquid after tag. 3. Customise the home page and create popup. Hire Me Try Shopify free for 14 days Start free trial Tags: dawn, notifications, popup, products, sales, shopify Please Share This Share this content Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Read more articles Previous PostHow To Create FAQs Page for Shopify Theme Dawn | Creating Accordions in Shopify Theme Development Next PostHow To Add Back To Top Button to Scroll From Bottom On Shopify You Might Also Like How To Create Color Swatches for Product Variants in Shopify (Dawn Theme) September 26, 2021 Shopify PayPal Credit Debit Card Buttons | Minimal Theme | Smart Buttons Updated Code May 30, 2021 How to Get Live Client ID From PayPal Account July 11, 2020 Leave a Reply Cancel replyCommentEnter your name or username to comment Enter your email address to comment Enter your website URL (optional) Save my name, email, and website in this browser for the next time I comment.