Pebona - eCommerce HTML5 Bootstrap 4 Template
Created: 10-September-2018
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to open a new ticket at our support forum.
Template Installation
-
FTP Upload:
- Open up your FTP manager and connect to your hosting
- Browse to required directory (Normally public_html)
- Upload the files inside pebona folder.
Pages
Here is the complete list of all HTML files with desctiption.
- index.html is for Home page
- index-2.html is for Home Page Version Two
- index-3.html is for Home Page Version Three
- index-4.html is for Home Page Version Four
- index-5.html is for Home Page Version Five
- shop-grid.html is for Shop page with grid view and left sidebar
- shop-list.html is for Shop page with list view and left sidebar
- shop-right-sidebar.html is for Shop page with right sidebar
- shop-fullwidth.html is for full-width Shop page
- single-product.html is for product details page
- blog.html is for 3 column full-width blog page
- blog-left-sidebar.html is for 2 column blog page with left sidebar
- blog-right-sidebar.html is for 2 column blog page with right sidebar
- blog-details.html is for Blog Details Right Sidebar blog page
- compare.html is for compare product page
- cart.html is for Cart page
- checkout.html is for Checkout page
- wishlist.html is for Wishlist page
- contact.html is for Contact page
- register.html is for user registration page
- my-account.html is for customer account dashboard page
- login.html is for user login page
- about.html is for about us page
- 404.html is for 404 error page
- faqs.html is for FAQs page
Fonts
You can find the font used in this template in the assets/css/style.css file.
<!-- Importing Google Font 'Rubik' -->
@import url("https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i");
Source File (CSS)
Here is a list of all CSS files used in Pebona.
<!-- Boostrap stylesheet -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Icon Font CSS -->
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/pe-icon-7-stroke.css">
<!-- Plugins stylesheet -->
<link rel="stylesheet" href="assets/css/plugins.css">
<!-- Master stylesheet -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" href="assets/css/responsive.css">
Source File (JS)
Here is a list of all JS files used in Pebona
<!-- modernizr JS -->
<script src="assets/js/modernizr-2.8.3.min.js"></script>
<!-- jQuery JS -->
<script src="assets/js/jquery.1.12.4.min.js"></script>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script>
<!-- Google Map JS -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzcEM8z2_imGO8TMRmJEpDEahvZ7KYY_U"></script>
<script src="assets/js/gmaps.min.js"></script>
<script src="assets/js/custom-map.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
Customization
How to Change Logo
How to Change Contact Form Recipient Email Address
Open the sendemail.php file provided with the template and replace the email address within the quotation mark there as per below screenshot:
How to Change Copyright
How to Change Map Location
To change the map location, you need to go to assets/js/custom-map.js which contains the javascript for Google Map. Here find a pair of lat, lng and provide your own latitude and longitude there ( lat = latitude and lng = longitude ). This lat/lng pair is responsible for both map location and centering of the map marker. If you need to change the URL for the map marker, please check the variable named image and change the image URL.
How to Change Instagram Information
To change the instagram user information, you need to go to assets/js/main.js which contains the javascript for Instagram. Here search for the js code block starting with comment s12 - Instagram Settings, you need to change the userId and accessToken of your instagram account. You can find your userId here, also your accessToken here.
