Shopify Question posted in
The Shopify help center can be found here.

How to change Shopify Title if the Browser tab is active or not

I’m trying to accomplish this in Shopify.

If the user has the browser tab active (change the page title to message A) and if the tab is not active (change page title to show message B).

For some reason, something is missing or wrong in my code.

I’m inserting this code in the header of the file: theme.liquid

<script>
      $(function () {
          leftTitle = 'Message A'; 
          backTitle = 'Message B';

          $(window).blur(function () {
              page.title = leftTitle;
          });

          $(window).focus(function () {
              page.title = backTitle;
          });
      });

    </script>

Any advice?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution myself:

    <script>
  var message = "Insert your message here";
  var original = document.title;

  window.onblur = function () { document.title = message; }
  window.onfocus = function () { document.title = original; }
</script>

  2. 0

    I think you’re trying to use document.title = leftTitle; and document.title = backTitle;

    page doesn’t exist natively on browsers, unless you’ve declared it before, so page.title doesn’t change anything; it should give you a console error.

    var leftTitle = 'Blurred'; 
var backTitle = 'Focused';

window.onblur = function () {
    console.log("Blur");
    document.title = leftTitle;
};

window.onfocus = function () {
    console.log("Focus");
    document.title = backTitle;
};

console.log("Event listeners initialized.");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search