If you want to further customize your store by adding links to your website, a logo, or links to other resources in the footer, this tutorial is for you.
We will show you how to add a Footer that can include an image and links like this one:
LET'S GO STEP BY STEP:
1. Copy the following code:
<!-- FOOTER custom -->
<footer class="footer-top">
<div class="container">
<nav class="row">
<div class="col-12 col-md">
<ul class="logos">
<!-- The following label corresponds to the image(logo) -->
<li> <a href="#" target="_blank"> <img class="logo-footer" src="#"><a/>
</ul>
</div>
<div class="col-8 col-md">
<p style="color: white">U.S</p>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#" target="_blank"> About us</a></li>
<li><a class="text-muted" href="#" target="_blank">Contact</a></li>
<li><a class="text-muted" href="#" target="_blank">Website</a></li>
</ul>
</div>
<div class="col-8 col-md">
<p style="color: white">HELP</p>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#" target="_blank">Help center</a></li>
<li><a class="text-muted" href="#" target="_blank">Frequent questions</a></li>
</ul>
</div>
</nav>
</div>
</footer>
<!-- FOOTER custom End -->
NOTE: You can modify the fields in bold by adding the texts and don’t forget to replace the hashtag symbol (#) with your corresponding URLs
2. Once you have added your logo, text choice, and URLs, go to Control Panel > Settings > Advanced, and paste the code in Custom before </body> code:
Save the changes.
3. Now we are going to style it. To make it look like the image we showed you at the beginning of this tutorial, use this code :
/*--- FOOTER --*/
.footer-top {
background: #000000;
padding: 30px 0 20px;
width: 100%;
margin-bottom: -72px;
}
.footer-nav ul.pages { list-style:none; padding:0px; }
.footer-top .footer-nav ul.pages li { padding:5px 0px;}
.footer-top .footer-nav ul.pages a:hover { color:red; text-decoration:none; font-weight: bold;}
.logos li{
list-style: none;
}
.logos img{
height: 110px;
width: 110px;
}
/*--- end FOOTER --*/
NOTE: You can modify the colors and appearance by editing the values of each tag. For this, you need to have knowledge of CSS or have a specialist help you.
📌Depending on the plan you chose, the CSS code will be pasted in different places, but don't worry, it works in the same way.
Both of them are configured from Control Panel -> Settings -> Advanced
In the event that you have the Custom CSS box, you can use the CSS code we shared above:
If you do not have the Custom CSS box, you will need to add the additional <style> tag </style> code and place the CSS code in Custom before </head> code:
📌Only in this case, use this code:
<style>
.footer-top {
background: #000000;
padding: 30px 0 20px;
width: 100%;
margin-bottom: -72px;
}
.footer-nav ul.pages { list-style:none; padding:0px; }
.footer-top .footer-nav ul.pages li { padding:5px 0px;}
.footer-top .footer-nav ul.pages a:hover { color:red; text-decoration:none; font-weight: bold;}
.logos li{
list-style: none;
}
.logos img{
height: 110px;
width: 110px;
}
</style>
Save the changes.
You're done! You have created your own custom Footer.
NOTE: Some tags may have an error and that is why the code does not work. To fix it, check that the code follows the guidelines shared in this tutorial.
We hope this tutorial has been easy for you and if you have any questions please don’t hesitate to contact us at [email protected].