Top

Add a Loading Message in the Upsell Window

Warning!

This is an unsupported theme customization. If you need help setting it up, Email our Support Wizards.

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 could 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 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