Thank you for purchasing our product!


Getting Started

Welcome to Porto eCommerce!

We are very pleased that you have chosen Porto for your website, you will be never disappointed!
Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Porto eCommerce.

If you are unable to find your answer here in our documentation, we encourage you to contact us through our support system with your site. We're very happy to help you and we will do our best to answer you as soon as possible.

Thank you, we hope you to enjoy using Porto eCommerce!

About Porto eCommerce

Porto eCommerce HTML is HTML5 / CSS3 based and powered by Bootstrap v4.1.3 and jQuery v3.3.1.

Folder Structure

General Structure
  • /demo-1 (All other demos have same structure)
    • ajax (Contains html templates that are refered as ajax content)
    • assets (CSS, fonts, javascript and images)
      • /css (Contains style.css and style.min.css - Detailed information is in next part)
      • /fonts (Theme default fonts and icons)
      • /images (All images *some of subfolders can be defferent depend on demos)
        • /about (About us page)
        • /banners (Banner images)
        • /blog (Blog Images)
          • /home
          • /related
          • /widget
        • /clients
        • /flags
        • /icons (Contains Favicon)
        • /logos (Logo images)
        • /products (Product images)
          • /cart
          • /single
          • /small
          • /zoom (Zoomed products)
        • /slider (Slider Images)
        • /team (Team memebers)
      • /js (Theme js files)
        • plugins (contains individual jQuery plugins)
      • /sass (For developers)
        • /base
        • /components
        • /config
        • /mixins
        • /plugins
Content
  • index.html - Home Page
  • about.html - About Us Page
  • blog.html - Blogs Page
  • cart.html - Cart Page
  • category.html - Category Page
  • checkout-review.html - Checkout Review Page
  • checkout-shipping.html, checkout-shipping-2.html - Checkout Shipping Page
  • contact.html - Contact Us Page
  • dashboard.html - Dashboard Page
  • forgot-password.html - Forgot Page Page
  • login.html - Log in / Sign up Page
  • my-account.html - Account Page
  • product.html - Product Page
  • single.html - Single Blog Page

CSS / SASS

Contents

CSS

  • /css
    • style.css
    • style.min.css
    • custom.css
  1. style.css is user customizable version of css file.
  2. style.min.css is minified version of style.css
  3. You can write your css in custom.css file to customize theme. By default, it is empty and not included in html templates.

Default theme is using style.min.css for speed optimization.

SASS

  • /sass
    • /base (Basic format)
    • /components (Scss for compoments)
    • /config (Configuration files)
    • /mixins (mixins)
    • /plugins (Sass files from plugins - We recommend to not touch)
    • style.scss

We are providing scss files for developers to customize our theme easily.

style.scss includes all sub scss files.

JS

Contents
  • /js
    • /plugins (contains individual jQuery plugins)
    • bootstrap.bundle.min.js (bootstrap v4.1.3 min js file)
    • jquery.min.js (jQuery v3.3.1 min file)
    • main.js (Main JS file)
    • main.min.js (Minified main js file)
    • map.js (contains google map api scripts)
    • nouislider.min.js (noUiSlider jQuery plugin)
    • plugins.js (Contains plugins in one file)
    • plugins.min.js (Minified plugin.js)
  1. main.js is user customizable version of js file.
  2. main.min.css is minified version of main.js

Default theme is using main.min.js file. If you want to change default Javascript methods, there are two options

  • Replace main.min.js with main.js and customize main.js file.
  • Customize main.js file and minimize it using tools such as koala, Codekit etc.

HTML Structure

General

                                        
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Include your stylesheets !-->
</head>

<body>
    <div class="page-wrapper">
        <header class="header"><!-- You can use class="header header-transparent" for transparent header !-->
            <!-- Header !-->
        <body>

        <main class="main">
            <!-- Main Content !-->
        </main>

        <footer class="footer">
            <!-- Site Footer !-->
        </footer>
    </div>

    <div class="mobile-menu-overlay"></div><!-- Overlay effect of mobile menu open !-->

    <div class="mobile-menu-container">
        <!-- Mobile Menu !-->
    </div>

    <div class="newsletter-popup">
        <!-- Newsletter Popup Content !-->
    </div>

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/plugins.min.js""></script>
    <script src="assets/js/main.min.js""></script>

    <!-- Your Script goes here !-->
</body>
</html>
                                        
                                    

Favicons Setting

You can use following code for your favicon.

                                        
<link rel="icon" type="image/x-icon" href="assets/images/icons/favicon.ico">
                                        
                                    

Layout Setting

Porto eCommerce Theme provides both Boxed and Full Width Layouts

Just replace class container with container-fluid

                                        
<div class="container">
<!-- Boxed Content !-->
</div>

<div class="container-fluid">
<!-- Full width content !-->
</div>
                                        
                                    

Theme Customization

We've already created custom.css file in the assets/css folder.

You can insert your styles there and include it in html templates as in the example bellow.

                                        
<head>

    ...

    <link rel="stylesheet" href="assets/css/style.min.css">

    <!-- Include your custom.css here !-->
    <link rel="stylesheet" href="assets/css/custom.css">
</head>
                                        
                                    

Icons

                                    
    <i class="icon-cancel"></i>
    <a class="icon-cancel"></a>
                                    
                                

Fonts

To change custom font, please take a look at assets/sass/config/_fonts.scss and assets/sass/config/_variables.scss.

                                    
<!-- _fonts.scss !-->
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');

<!-- _variables.scss !-->
$font-family: 'Open Sans', sans-serif !default;
$second-font-family: 'Oswald', sans-serif !default;
                                    
                                

Slider

Porto eCommerce is using Owl Carousel.

You can find detailed documentation here.

Credits

jQuery

  • jQuery v3.3.1
  • Waypoints v4.0.1
  • hoverIntent r7
  • Bootstrap TouchSpin v4.2.5
  • jquery-countTo v1.2.0
  • Magnific Popup v1.1.0
  • Owl Carousel v2.3.4
  • Waypoints Sticky Element Shortcut - 4.0.1
  • Superfish Menu Plugin v1.7.10
  • elevateZoom v3.0.8
  • Zepto Parallax Plugin
  • Custom Defined Sticky

CSS / Fonts

  • Bootstrap v4.1.3
  • Font-Awesome (Font Icons)
  • Icomoon (Font Icons)
  • Fontello (Font Icons)
  • Google Fonts
  • Open Sans Font
  • Oswald Font
  • Playfair Display Font
  • Shadows Into Light Font
  • Poppins Font