If you want to add Custom Text with a Click action in the header section of your page,
just follow the below steps
- First You Have to login into your Manage Panel.
- 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,
- Go to Design -> Custom CSS.
- Copy and Paste the below lines of CSS.
- 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.