Inactive Tab Messages

Click anything in this article then open a new tab in your browser. Observe how the window title is now rotating a message.

To install to your own store, get the files from the repository or checkout this commit. Copy the contents of the files inside the folder src/inactive-tab-messages which should contain the following:

📦src
┣ 📂inactive-tab-messages
┃ ┣ 📂assets
┃ ┃ ┣ 📜preload_images.js
┃ ┃ ┗ 📜tab_messages.js
┃ ┗ 📂sections
┃ ┃ ┗ 📜tab_messages_config.liquid

You must then include these files in your layout/theme.liquid layout file:

Inside the <head>:

   {% section 'tab_messages_config'%}

And inside <body> at the end of it:

   <scriptsrc="{{ 'preload_images.js' | asset_url }}"defer="defer"></script>
   <scriptsrc="{{ 'tab_messages.js' | asset_url }}"defer="defer"></script>

• On all pages will apply to any shopify page, not every window in the store.
• On a template is a way for us to target a template and a developer defined block. For example, the example on the left targets any Article that has a "main-article" snippet in it.
• On a page just lets you pick a specific page

You may select up to 3 messages and favicons.

Developers must note of the following discoveries about the behavior of this component so as not to get stuck.

Note of this "gotcha" where `blur` events of the page will not trigger if you just refresh the page and navigate out. The `blur` event that the component is listening to will only trigger if the page gained `focus` in the first place. This means that users must have at least clicked anything inside the page before navigating to another tab.

This is very likely caused by not having a favicon in the first place. This component requires a favicon in the settings so that the `theme.liquid` file will generate a `<linkrel="icon" ... />` element.