1. Go to theme -> Edit code -> Sections
2. Create a new section and name it sales-popup-notifications
3. Go to Layout -> theme.liquid and find <body
4. Include the section by pasting below line of code in body
{% section 'sales-popup-notifications' %}
5. Paste below code in sales-popup-notification file which you created:
<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;
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
}
img.toastify-avatar {
width: auto;
height: 80px;
}
.toast-close {
margin-bottom: auto;
color: black;
}
@media only screen and (max-width: 800px) {
div.toastify {
max-width: calc(98% - 20px);
}
}
</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 %}
6. You can customize the popup speed in customization of theme.