This feature can be used to highlight important information for users, provide a link or simply add desired text.
We are going to show you how to add a nav-header in the store like this one:
1.Go to Control Panel > Settings > Advanced
2. Copy the following code:
<script>
var huincha = document.querySelector('#Nav');
var header = document.querySelector('.Header').classList.remove('fixed-top');
huincha.insertAdjacentHTML( 'beforebegin', '<div class="alert" role="alert" style="margin-top:0px; margin-bottom: 0px; text-align: center; background-color: #1b5990; color: #ffffff; font-weight: bold; border-radius: 0">Log in and find all your ebooks in the My Publications section.</div>');
</script>
NOTE:
You can modify the bold text by adding what you want to communicate to the users.
0">Log in and find all your ebooks in the My Publications section.</div>');You can modify the text color and background color by adding the HTML code for each color in background-color and color (text color).
3. Paste the code into the Custom before </body> code box.
4. Save the changes.
Done! You should already have your component available in the storefront.
If you want to further modify the customization you must have knowledge in HTML, CSS and JavaScript or you can consult a specialist.
We hope this tutorial has been easy for you. In case you have questions, contact us at [email protected]