1. Introduction
We would like to thank you for choosing Ekomart-Grocery-Store(e-Commerce) HTML Template.
We made Ekomart from the ground-up with flexibility in mind. Each element of Ekomart is extremely customizable, where you can make Ekomart to reflect your own branding styles.
The guide gives you detailed methodologies about how you can customize Ekomart and make it fit your brand perfectly!
1.1. What's Included
After purchasing Ekomart template on themeforest.net with your Envato account, go to your Download page. You can choose to download Ekomart template only or the entire Ekomart template package which contains the following files:
- Ekomart: A HTML template file.
- Documentation: This folder contains what you are reading now.
1.3. Font
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
1.4. Source File (CSS)
<link rel="stylesheet preload" href="assets/css/plugins.css" as="style">
<link rel="stylesheet preload" href="assets/css/style.css" as="style">
1.5. Source File (JS)
<script defer src="assets/js/plugins.js"></script>
<script defer src="assets/js/main.js"></script>
2.1. Change Site Title and Favicon
To change your Site title and Favicon, open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
2.2. Change Logo
To change your Site Logo, open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
2.3. Header Menu
To customize your Header Menu, open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
2.4. Sidebar Menu
To customize your Sidebar Menu, open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
3.1. Header
From the located file in the image you can customize you site header layout
3.2. Footer
Here is the file where you can customize your footer
2.5. Breadcrumb
To customize your Site Breadcrumb, open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
3.3. Global Color
To change Ekomart Global Color
4. Content
To customize your Site Content open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
Page Content:
4.1. Blog
To customize your Site Blog open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
4.2. Testimonial
To customize your Site Testimonial open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
4.3. Brand Slider
To customize your Brand Slider open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
4.4. Swiper Slider Customization
To customize your Swiper API open the Ekomart in your editor and go to the location by following screenshot which are given bellow.
Customize Header Slider:
To configure SwiperJs, use the data-swiper attribute and use Swiper built-in options in strings.
<div class="swiper swiper-data" data-swiper="
{
"slidesPerView":1,
"effect": "fade",
"loop": true,
"speed": 1000,
"navigation":{
"nextEl":".rt-next",
"prevEl":".rt-prev"
},
"pagination":{
"el": ".rts-swiper-dots",
"clickable": "true"
},
"autoplay":{
"delay":"7000"
}
}">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="rts-swiper-dots"></div>
<!-- Add Arrows -->
<div class="rt-slider-btn rt-next"></div>
<div class="rt-slider-btn rt-prev"></div>
Customize Brand Slider:
To configure SwiperJs, use the data-swiper attribute and use Swiper built-in options in string.
<div class="swiper swiper-data" data-swiper="{
"slidesPerView":7,
"loop": true,
"autoplay":{
"delay":"3000"
},
"breakpoints":{
"320":{
"slidesPerView": 3,
"centeredSlides": true
},
"575":{
"slidesPerView": 4,
"centeredSlides": true
},
"768":{
"slidesPerView": 5,
"centeredSlides": true
},
"991":{
"slidesPerView": 6,
"centeredSlides": true
},
"1201":{
"slidesPerView": 7,
"centeredSlides": true
}
}
}">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
5. Support
Support Scope
Included in Free Support Scope:
- Fixing bugs
- Helping clients in changing site contents by sending instructions that couldn’t be covered by documentation
NOT Included in Free Support Scope:
- Any type of custom changes
- Any type of request to update clients’ site contents
Paid Support Scope:
Paid support is not a part of Free Support when you purchase the template from themeforest. We understand that some clients need custom changes while using our template. For that we kept an option for paid support which includes:
- Custom change request
- Custom pages
- Custom features
We kept a flat rate for our paid support which is $25/hour.
Support Ticket
Please send your support request here. You will response within 1 business day.
Regards,
Reactheme Support Team