If you want to add Custom Text with a Click action in the header section of your page,
just follow the below steps
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.
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,
#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.
Powered by BetterDocs