How to create blinking title in the address bar when the customers switch to other tab in the browser
Some of your visitors simply forget to re-visit your site and leave your site, rather than buying from you. How to grab visitors attention before they leave your store forever?
It’s simple. Create an engaging custom blinking title in the address bar to attract them back to your store. It means whenever someone visits your shop and switches to other tab in the browser, the page title gets blinking with the message defined by you. This way to attract them back to your store and increase conversion rates by letting your tab decrease bounce rates.
Shopify app store has multiple the apps that help you build this feature for your store. But you can build it manually via the below guide.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Snippets directory, click Add a new snippet.
- Name your new snippet alert-come-back, and click Create snippet:
Your new snippet will open in the code editor. - Into your new alert-come-back.liquid snippet, paste the below code:1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<script type="text/javascript">(function() {var hold = '';var d=document,f=document.querySelector('link[rel="shortcut icon"]'),f1 = f.getAttribute("href"),m1 = "Hey gentleman...",m2 = "Please Come Back!",f2 ='//cdn.shopify.com/s/files/1/2266/2561/files/click-png_32x32.png?v=1528539763';function altTitle(t, n, e, o, l) {var i = d.title;if (null == o && (o = !1), null == l && (l = !1), l && setTimeout(altTitleStop, l), 0 == o && (hold = window.setInterval(function() {d.title == t ? d.title = n : d.title = t}, e)), 1 == o) {var u = !0;d.title;var hidden, visibilityState, visibilityChange;if (typeof document.hidden !== "undefined") {hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";}else if (typeof document.mozHidden !== "undefined") {hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState";}else if (typeof document.msHidden !== "undefined") {hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";}else if (typeof document.webkitHidden !== "undefined") {hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState";}document.addEventListener(visibilityChange, function() {switch (document[visibilityState]) {case "visible":u = !0,f.setAttribute("href",f1);break;case "hidden":u = !1, !1,f.setAttribute("href",f2);break;}});hold = window.setInterval(function() {0 == u ? d.title == t ? d.title = n : d.title = t : d.title = i}, e)}}function altTitleStop() {clearInterval(hold)}altTitleStop();altTitle(m1, m2, 2000, true);})();</script>
- Click Save.
- In the Layout directory, click theme.liquid.
- Add the below code before close the body tag </body>.1{% include 'alert-come-back' %}
- Click Save.
Happy coding!
