Add a Loading Message in the Upsell Window

Follow

Warning!

This is an unsupported theme customization. Please contact our Merchant Success team if you require additional assistance.

The more products set to appear in the upsell window the longer it will take to load. If you're concerned about users waiting for the window to finish loading, you can add this code to your theme to display a "please wait" message.

To add this code to your theme, follow these steps:

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under "Layout", select theme.liquid.

    select theme.liquid

  5. Add this code to the bottom of the file:
    <script>
          $( document ).ready(function() {
               $("#checkout").on('click',function(){
                      setTimeout(function(){
                             $('#button').prepend('<div class="waitmessage">Hey! Please wait while we load your special offers!</div>');
                             setTimeout(function(){
                                    $('.waitmessage').css('display', 'none');
                             }, 12000);
                      }, 500);
                 });
            });
    </script>
    <style>
    .waitmessage {
    width: 100%;
    text-align: center;
          font-size: 14px;
          font-weight: bold;
          margin-bottom:10px;
          margin-top:10px;
      } 
    </style>

    add the code

  6. Select Save.

    select save

That's it!

Next Steps:

Blog Posts:

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.