Customization
This page will assist you modify the template to fit your style.
How to change the font
Hind is a free font by Google Fonts and is the typography used across the
template.
Follow the instructions below to change or add the typography
or font of the temaplate.
/* Add this code at the top of your style.css file */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap')
Find /assets/css/style.css and replace
the font-family from the <body> tag with the font of choice
body{
font-family: 'Hind', sans-serif;
}How to change the logo
To change the logo, add your logo to the /assets/images/ folder
<a class="navbar-brand" href="#">
<img src="assets/images/logo-small.png" alt="shop logo">
</a>
How to edit animations
Blue template depends on aos for animation
on some elements.
You can read more on
aos(Animate on scroll) here
Follow the following instructions to add or change animations.
Place the following <script> near the end of your pages, right
before the closing <body> tag.
<!-- Custom Js -->
<script src="assets/vendor/dist/aos.js"><script>
Add the below code to your /assets/js/app.js file.
// Initializing AOS
AOS.init();
Add data-aos="" attribbute to
any element with animation effect as the value to animate it. Example use case is:
<!-- The following code adds a fade animation to the img element -->
<img src="assets/images/logo-small.png" data-aos="fade-up" alt="">
Some aos aniamtion effects
data-aos="slide-right"data-aos="fade-right"data-aos="Zoom-out"data-aos="flip-left"data-aos="slide-left"
See AOS documentation for more details