You are currently viewing How To Create Sales Popup Notifications of Products in Shopify (Without Shopify Apps)

How To Create Sales Popup Notifications of Products in Shopify (Without Shopify Apps)

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.

Try Shopify free for 14 days

Leave a Reply