How to add Custom Text and Image In Page Header

If you want to add Custom Text with a Click action in the header section of your page, 

just follow the below steps

1. First You Have to login into your Manage Panel.
2. Please go to Design -> Custom JS

3. Give a Name and select the position where you will write the JS (Java Script)

4. Just Copy and paste the following Code in the editor and Save.

$( document ).ready(function() {
    $('<div class="w-100 d-block text-center p-3" id="special-promo-banner" style="font-weight:bold;background:#000;color:white">SHIPPING WORLDWIDE // 90 DAYS MONEY BACK GUARANTEE!</span> <span class="animated"> CLICK HERE <i class="fa fa-arrow-right"></i></span></div>').insertBefore('#navbar-row-1')
    $('#special-promo-banner').click(function(){
      window.location.href = '/shop'
    });
});

For Text Change just change the following bold text in code:
<div class=”w-100 d-block text-center p-3″ id=”special-promo-banner” style=”font-weight:bold;background:#000;color:white”>SHIPPING WORLDWIDE // 90 DAYS MONEY BACK GUARANTEE!</span>

From here, you can change the Header Text as per your wish.

$(‘#special-promo-banner’).click(function(){ #

      window.location.href = ‘/shop’ #

    }); #

From here, you can redirect to any page by changing the href Location.

***If you want to add little animation to CLICK HERE action text, 

1. Go to Design -> Custom CSS.
2. Copy and Paste the below lines of CSS.
3. Click Save.

#special-promo-banner {cursor: pointer;}
#special-promo-banner .animated {color:yellow;animation: zoom-in-zoom-out 2s ease-out infinite;}
@media only screen and (min-width: 768px) {
    #special-promo-banner span{ display:block}   
}
@keyframes zoom-in-zoom-out {
    0% {
    transform: scale(1, 1);
    }
    50% {
    transform: scale(1.25, 1.25);
    }
    100% {
    transform: scale(1, 1);
    }
}

You are all set and ready to go.