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 Make Buttons to Smart Button in Shopify ? Shows Colourful Bubbles on Hover. September 4, 2021 How to Create Product Slider in Shopify Dawn Theme January 7, 2022 Integrate PayPal smart button in Shopify refresh theme August 23, 2023 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. Δ