Panda Docs

Welcome to Panda HTML

Thank you for choosing Panda HTML!
We are very pleased that you have chosen Panda for your website. You will not be disappointed with your choice.

• Panda is specifically designed for eCommerce sites.
• Panda is the most powerful, fastest, responsive theme with tons of features and trendy designs.
• Panda is based on HTML5 and CSS3, and works perfectly fine with all the browsers.
• Panda includes 10 elegant demo pages and 14 subpages.

Please read our documentation before you get started, and if you have any questions, please feel free to contact us through the themeforest support page.

Thank you, we hope you enjoy using Panda HTML!

Files Structure

Panda has so simple a files structure that anyone can easily understand.
This section will give you the entire files structure of Panda.

Overview

Panda uses SASS as the css processor, the most powerful adn professional grade CSS extension language.

Helper Classes

Panda defines useful helper classes for free customization.

Mixins

Panda supports several mixins for responsiveness, compatibility with some browsers and retina display.

Configuration

Panda uses some predefined colors, fonts and media breakpoints. These are written in sass/config/_variable.scss.

Predefined colors

Predefined font

Predefined breakpoints

Predefined Social Icon Colors

@include mq(xs) {
    h1 {
        font-size: 3rem;
    }
}

@media (min-width: 480px) {
    h1 {
        font-size: 3rem;
    }
}

@include mq(xs, max) {
    h1 {
        font-size: 3rem;
    }
}

@media (max-width: 479px) {
    h1 {
        font-size: 3rem;
    }
}

Variables

Panda has the most advanced sass configuration. The variables can easily be reset to reduce css and the depth of the selector without having to modify the source code.

Example: header config in _header.sass

The default variables for the header is in sass/base/_header.scss.

// Variables
@include set-default(
    ( 
        header: ( 
            letter-spacing: false, 
            background: false, // Header Top
            top: ( 
                padding-top: false, 
                padding-bottom: false, 
                color: $dim-color, 
                border-bottom: 1px solid $border-color, 
                font-size: .75em, 
                text-transform: uppercase, 
                _links-gap: 2.3rem
                ), 
            // Header Middle
            middle: ( 
                padding-top: 2.9rem, 
                padding-bottom: 2.7rem, 
                color: $primary-color-dark, 
                background: false, 
                border-bottom: false, 
                font-size: .875em, 
                font-weight: false, 
                logo: ( 
                    margin-bottom: .2rem, 
                    _mobile-margin-right: 2rem
                ), 
                login: ( 
                    margin: .2rem 1.9rem 0 0, 
                    icon: ( 
                        font-size: 1.543em, 
                    )
                ), 
                center: ( 
                    margin:0 2rem 0 3.8rem, 
                ), 
            ), 
            // Header Bottom
            bottom: ( 
                border-bottom: 1px solid $border-color, 
                padding: 1rem 0, 
                color: false, 
                font-size: false, 
            ), 
            // Sticky Header
            sticky: ( 
                padding-top: 1.5rem, 
                padding-bottom: 1.4rem, 
                background: false, 
                box-shadow: 0 2px 5px rgba( $black-color, 0.1), 
            ), 
            // MainMenu
            main-nav: ( 
                margin: .3rem 1.5rem 0 .3rem, 
            ), 
            // MobileMenu Toggle
            mmenu-toggle: ( 
                color: $dark-color, 
            ), 
            //Select box
            select: ( 
                width: 18.4rem, 
                border: 0, 
                font-size: 1em, 
                letter-spacing: .05em
            ), 
            // Header Search
            search: ( 
                // Toggle Search
                toggle: ( 
                    padding: 1.1rem 0, 
                    width: 34rem
                ), 
                // Expanded Search
                expanded: ( 
                    width: 74.1rem
                )
            ), 
            // Call
            call: ( 
                label: ( 
                    _gap: .3rem, 
                    padding-top: 3px, 
                    font-weight: inherit, 
                    line-height: false, 
                    text-transform: uppercase, 
                ), 
                icon: ( 
                    font-size: 1.514em, 
                    margin: .3rem .3rem 0 0
                )
            ), 
            // Wishlist
            wishlist: ( 
                icon: ( 
                    font-size: 1.6em
                )
            ), 
            contact: ( 
                display: flex, 
                align-items: center, 
                line-height: 1, 
                padding: 1.4rem 0 1.2rem 1.5rem, 
            ), 
        )
    )
);

Example: customize header

Following codes are used to customize Demo 2's config in sass/demos/demo2/_demo2_config.scss.

• If you want to override the config, please use mixin set and write a variable.
• If you want to remove unnecessary css codes, please set value false.

@include set (
    (
        header: (
            middle: (
                padding-bottom: 2.5rem,
            ),
            bottom: (
                letter-spacing: .1em,
                padding: 0,
                color: $white-color,
                background: #353431,
            )
        )
    )
);

Overview

The table below shows how to initialize Panda and its functions.

Accordion

Use the code below to display an accordion.

<div class="accordion accordion-simple">
<div class="card">
    <div class="card-header">
        <a href="#collapse1-1" class="collapse">There are many variations</a>
    </div>
    <div id="collapse1-1" class="card-body expanded">
        <p class="mb-3" style="line-height: 2.4rem;">
            It is a long established fact that a reader will be distracted
            by the readable content of a page when looking at its layout. The point of
            using Lorem Ipsum is that it has a more-or-less normal distribution of
            letters, as here opposed to using ‘Content here, content here’, making it
            look like readable English.</p>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <a href="#collapse1-2" class="expand">Lorem Ipsum generators</a>
    </div>
    <div id="collapse1-2" class="card-body collapsed">
        <p class="mb-3">It is a long established fact that a reader will be
            distracted
            by the readable content of a page when looking at its layout. The point of
            using Lorem Ipsum is that it has a more-or-less normal distribution of
            letters, as here opposed to using ‘Content here, content here’, making it
            look like readable English.</p>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <a href="#collapse1-3" class="expand">The standard chunk of Lorem</a>
    </div>
    <div id="collapse1-3" class="card-body collapsed">
        <p class="mb-3">It is a long established fact that a reader will be
            distracted
            by the readable content of a page when looking at its layout. The point of
            using Lorem Ipsum is that it has a more-or-less normal distribution of
            letters, as here opposed to using ‘Content here, content here’, making it
            look like readable English.</p>
    </div>
</div>
</div>

Useful classes

Alert & Notification

Use the code below to display an alert & notification.

<div class="alert alert-primary alert-simple alert-inline mx-auto d-flex justify-content-center 
mb-4">
    <h5 class="alert-title text-center">This is a <b>news</b> alert</h5>
    <button type="button" class="btn btn-link btn-close">
        <i class="p-icon-close"></i>
    </button>
</div>

Useful classes

Blog

Panda provides 5 elegant ways to showcase your blogs. It's very simple to use.

Use the code below to display a blog.

<div class="post post-border post-center overlay-zoom overlay-dark">
    <figure class="post-media">
        <a href="blog-single.html">
            <img src="images/blog/1-400x250.jpg" width="400" height="250" alt="post" />
        </a>
        <div class="post-calendar">
            18 Feb 2021
        </div>
    </figure>
    <div class="post-details">
        <p class="post-cats"><a href="blog.html">Vegetable</a>,<a href="blog.html">
                Fruit</a></p>
        <h3 class="post-title"><a href="blog-single.html">Aliquam id diam maecenas
        <br>ultricies get mauris</a>
        </h3>
        <div class="post-meta">
            <a href="blog.html" class="post-author">
                <img src="images/agents/1.jpg" class="post-agent" width="31" height="31"
                    alt="agent">By<span>Anna</span></a>
            <a href="blog-single.html#post-comments" class="post-comments hash-scroll">
                <i class="p-icon-email"></i>0
            </a>
            <div class="post-share">
                <i class="p-icon-socials"></i>
                <div class="social-links dirVertical">
                    <a href="#" class="social-link fab fa-facebook-f"></a>
                    <a href="#" class="social-link fab fa-twitter"></a>
                    <a href="#" class="social-link fab fa-pinterest"></a>
                    <a href="#" class="social-link fab fa-linkedin-in"></a>
                </div>
            </div>
        </div>
        <p class="post-content">
            Lorem ipsum dolor sit amet,anadipis sed do sed doeiu smod tempo...
            <a href="blog-single.html">(read more)</a>
        </p>
    </div>
</div>

Button

To make buttons, please use this:

• <a href="#" class="btn"> Button </a>
  
• <button class="btn"> Button </button>

Button Color Skin

• btn-primary - Primary color skin button.
• btn-secondary - Secondary color skin button.
• btn-dim - Dim color skin button.
• btn-success - Success color skin button.
• btn-alert - Alert color skin button.
• btn-dark - Dark color skin button.
• btn-primary-dark - Primary Dark color skin button.
• btn-white - White color skin button.

Button Type

• btn - Default: Solid button type.
• btn-outline - Outlined button type.
• btn-link - Link type.

Button Shapes & Shadow

• btn - Default: rectangle button.
• btn-rounded - Rounded button.
• btn-ellipse - Ellipse button.
• btn-shadow, btn-shadow-lg for shadowed buttons.

Button Size

• btn-sm, btn-md, btn, btn-lg for any button
• btn-block for full width.

Button With Icon & Animation

• btn-slide-right - Buttons with icons sliding to the right
• btn-overlap - Buttons with overlap effects
• btn-reveal-right - Buttons with icons revealed on the right

Category

Panda provides 5 attractive types to showcase product categories.

Use the code below to display a simple product category.

<div class="category category-simple overlay-zoom">
    <a href="#">
        <figure>
            <img src="images/elements/category/category1.jpg" alt="category" width="295"
                height="295">
        </figure>
    </a>
    <div class="category-content">
        <h5 class="category-name"><a href="#">Fruit</a>
        </h5>
        <span class="category-count">2 Products</span>
    </div>
</div>

Grid

Panda provides the most advanced way to implement responsive grid layouts.
All grid items are wrapped with row class. If you want to know more about breakpoints, please go to configuration section.

• breakpoint can be xs, sm, md, lg, xl.
• size can be 1 ~ 8 for cols, and 1 ~ 12 for col.

The following code means children are shown in 4 columns above 768px(as default), in 3 columns above 576px, and show in 2 columns below 575px with large gutter size (default is 30px).

<div class="row cols-2 cols-sm-3 cols-md-4 gutter-lg">
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
    ...
</div>

Bootstrap-like layouts will be able to be shown by using col- classes.

<div class="row gutter-lg">
    <div class="col-6 col-sm-4 col-md-3"> ... </div>
    <div class="col-6 col-sm-4 col-md-3"> ... </div>
    <div class="col-6 col-sm-4 col-md-3"> ... </div>
    <div class="col-6 col-sm-4 col-md-3"> ... </div>
    <div class="col-6 col-sm-4 col-md-3"> ... </div>
    ...
</div>

Creative Grid

If you want a creative grid, please add:

• grid-type class to wrapper.
• grid-item class to items.

Please refer to Element - Image Gallery page for more details.

Masonry Layout

If you need a masonry layout, please add:

• grid class to wrapper.
• grid-item class to items.
• grid-space class for a grid space unit.

It depends on isotope plugin.

<div class="grid row">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    ...
    <div class="grid-space col-1"></div>
</div>

Hotspot

Panda provides a very beautiful way of showing information on an image.
Use the code below to display a hotspot.

<div class="hotspot-container">
    <figure>
        <img src="images/elements/hotspot/1.jpg" alt="Hotspot Image" width="1240" height="450"
            style="background-color: #f3f3f3;" />
    </figure>
    <div class="hotspot hotspot-type1 hotspotspread hotspot1 hotspot-right">
        <a href="#" title="Hotspot"><i class="p-icon-plus-solid"></i></a>
        <div class="tooltip product-list-sm tooltip-type1">
            <figure class="product-media">
                <a href="product-simple.html">
                    <img src="images/elements/hotspot/hotspot-1.jpg" alt="hotspot" width="130"
                        height="163" />
                </a>
            </figure>
            <div class="product-details">
                <div class="ratings-container">
                    <div class="ratings-full">
                        <span class="ratings" style="width:60%"></span>
                        <span class="tooltiptext tooltip-top"></span>
                    </div>
                    <a href="product-simple.html" class="rating-reviews">(12)</a>
                </div>
                <h5 class="product-name">
                    <a href="product-simple.html">
                        Organic Apple
                    </a>
                </h5>
                <span class="product-price">
                    <del class="old-price">$3.00</del>
                    <ins class="new-price">$2.00</ins>
                </span>
                <a href="#" class="btn btn-link btn-dim btn-cart btn-underline"
                data-toggle="modal" data-target="#addCartModal" title="Add to cart">
                    Add to Cart<i class="p-icon-arrow-long-right"></i>
                </a>
            </div>
        </div>
    </div>
</div>

We provide 2 types of hotspots.

Icon

Panda comes with Font Awesome 5 Icons, and elegant Panda Icons that can be used in your website.

Please refer to Element - Icon Library page for more details.

Icon Box

With Panda, important information or notification can be shown with an icon box so easily.
Use the code below to display a simple icon box.

<div class="icon-box icon-box-side">
    <span class="icon-box-icon">
        <i class="p-icon-shipping-solid"></i>
    </span>
    <div class="icon-box-content">
        <h4 class="icon-box-title">FREE SHIPPING & RETURN</h4>
        <p>Free shipping on orders over $99</p>
    </div>
</div>

Instagram

With Panda, instagram images can be easily shown.
Use the code below to display an instagram.

<figure class="instagram mb-4">
    <a href="#">
        <img src="images/elements/image_gallery/1.jpg" alt="Instagram" width="295" height="295"
            style="background-color: #e1979a;" />
    </a>
</figure>

Minipopup

Panda provides a powerful notification of shopping.
For example, "Successfully Added" notification minipopup is shown when you add a product to your cart. And it shows virtual notifications saying "Someone Purchased".

Initialize in Javascript

// Initialize a minipopup
Panda.Minipopup.init(); // requires only one call at first.
// Open the minipopup
Panda.minipopup.open( options, callback );

Options

The minipopup template can be changed by template parameter.

Example: "Successfully Added"

When the user adds a product to the cart, "Successfully Added" notification will be shown as a minipopup.
Use below javascript code to display a minipopup.

Panda.Minipopup.open( {
    message: 'Successfully Added',
    productClass: 'product-mini',
    name: name,
    nameLink: $product.find( '.product-name > a' ).attr( 'href' ),
    imageSrc: $product.find( '.product-image img' ).eq( 0 ).attr( 'src' ),
    imageLink: $product.find( '.product-name > a' ).attr( 'href' ),
    price: $product.find( '.product-variation-price' ).length > 0 ? 
        $product.find( '.product-variation-price' ).children( 'span' ).html() : 
        $product.find( '.product-price .price' ).html(),
    count: $product.find( '.quantity' ).val(),
    actionTemplate: '<div class="action-group d-flex mt-3">
        <a href="cart.html" class="btn btn-sm btn-outline btn-primary btn-block mr-2">
            View Cart</a>
            <a href="checkout.html" class="btn btn-sm btn-primary btn-block">
            Check Out</a>
        </div>'
} );

Example: "Someone Purchased"

When another user purchases a product, "Someone Purchased" notification can be shown. The boxes are stacked.

Panda.Minipopup.open( {
    message: 'Someone Purchased',
    productClass: 'product-mini',
    name: 'Actinidia Arguta',
    nameLink: 'product-simple.html',
    imageSrc: 'images/cart/product-1.jpg',
    isPurchased: true
}, function ( $box ) {
    Panda.ratingTooltip( $box[ 0 ] );
} );

Popup

To display a popup dialog box, the following function can be used.
Panda.popup( option, presetName );

• option - Magnific popup options.
• preset - Name for pre-set options

It depends on jquery.magnific-popup plugin.

Example: Quickview box

Panda.popup( {
    items: {
        src: "ajax/quickview.html"
    },
    callbacks: {
        ajaxContentAdded: function () {
            this.wrap.imagesLoaded( function () {
                Panda.initProductSingle( $( '.mfp-product .product-single' ) );
            } );
        }
    }
}, 'quickview' );

For zoom and flip effect, Panda provides mfp-zoom-popup and mfp-flip-popup class.

Product

Panda provides 7 attractive types to showcase products. Please check product styles in Element - Products page.

Use the code below to display products of the default style.

<div class="product text-center">
    <figure class="product-media">
        <a href="product-simple.html">
            <img src="images/products/5-295x369.jpg" alt="product" width="295"
                height="369" />
            <img src="images/products/5-2-295x369.jpg" alt="product" width="295"
                height="369" />
        </a>
        <div class="product-label-group">
            <label class="product-label label-new">New</label>
        </div>
        <div class="product-action-vertical">
            <a href="#" class="btn-product-icon btn-cart" data-toggle="modal"
                data-target="#addCartModal" title="Add to Cart">
                <i class="p-icon-cart-solid"></i>
            </a>
            <a href="#" class="btn-product-icon btn-wishlist" title="Add to Wishlist">
                <i class="p-icon-heart-solid"></i>
            </a>
            <a href="#" class="btn-product-icon btn-compare" title="Compare">
                <i class="p-icon-compare-solid"></i>
            </a>
            <a href="#" class="btn-product-icon btn-quickview" title="Quick View">
                <i class="p-icon-search-solid"></i>
            </a>
        </div>
    </figure>
    <div class="product-details">
        <div class="ratings-container">
            <div class="ratings-full">
                <span class="ratings" style="width:60%"></span>
                <span class="tooltiptext tooltip-top"></span>
            </div>
            <a href="product-simple.html#content-reviews"
                class="rating-reviews">(12)</a>
        </div>
        <h5 class="product-name">
            <a href="product-simple.html">
                Peanuts
            </a>
        </h5>
        <span class="product-price">
            <span class="price">$12.00</span>
        </span>
        <span class="product-unit">
            (250 g)
        </span>
    </div>
</div>

Sidebar

Panda supports a very simple way to implement a sidebar, and the left and right sidebar is already defined. A new sidebar can be defined.

Classes for left and right sidebar

If you want to add a sidebar named "new", please add new-sidebar class to aside tag.
This sidebar is opened when new-sidebar-active class is added to body tag.
new-sidebar-toggle class will be used at toggle buttons of this sidebar.

Sticky Sidebar

If you want to make a sidebar sticky:

• Please include vendor/sticky/sticky.min.js.
• Please add sticky-sidebar-wrapper class to the sticky area.
• Please add sticky-sidebar class to the sidebar content's inner element.

<aside class="sticky-sidebar-wrapper ...">
    ...
    <div class="sidebar-content">
        <div class="sticky-sidebar" data-sticky-options="{'top': 10}"> 
            // Sticky sidebar's offset top limit is 10px.
            <div class="widget">
                ...
            </div>
            ...
        </div>
    </div>
</aside>
...
<script src="vendor/sticky/sticky.min.js"></script>

Slider

Panda provides a powerful slider component, using Owl Carousel, the famous touch enabled, fast & responsive jQuery plugin. Before using it, we recommend to read about grid spacing, in order to perform first paint faster, we display a non-interactive carousel with css first. It becomes inactive after the javascript is executed.

This slider depends on owl-carousel plugin.

Example: Image slider in 4 columns

Custom owl carousel options could be given in data-owl-options attribute in html.

<div class="owl-carousel owl-theme owl-nav-arrow owl-nav-outer row cols-xl-4 cols-md-3 cols-2"
    data-owl-options="{
    'items': 4,
    'dots': false,
    'margin': 20,
    'autoplay': true,
    'responsive': {
        '0': {
            'items': 2,
            'nav': false
        },
        '768': {
            'items': 3
        },
        '992': {
            'items': 4
        },
        '1500': {
            'nav': true
        }
    }
}">
    <figure class="instagram">
        <a href="#">
            <img src="images/elements/image_gallery/2.jpg" alt="Instagram" width="295"
            height="295" style="background-color: #595b19;" />
        </a>
    </figure>
    <figure class="instagram">
        <a href="#">
            <img src="images/elements/image_gallery/1.jpg" alt="Instagram" width="295"
            height="295" style="background-color: #ebb83b;" />
        </a>
    </figure>
    <figure class="instagram">
        <a href="#">
            <img src="images/elements/image_gallery/3.jpg" alt="Instagram" width="295" 
            height="295" style="background-color: #ebebeb;" />
        </a>
    </figure>
    <figure class="instagram">
        <a href="#">
            <img src="images/elements/image_gallery/4.jpg" alt="Instagram" width="295"
            height="295" style="background-color: #e7b06d;" />
        </a>
    </figure>
    <figure class="instagram">
        <a href="#">
            <img src="images/elements/image_gallery/5.jpg" alt="Instagram" width="295"
            height="295" style="background-color: #604e44;" />
        </a>
    </figure>
    <figure class="instagram">
        <a href="#">
            <img src="images/elements/image_gallery/6.jpg" alt="Instagram" width="295"
            height="295" style="background-color: #fcd204;" />
        </a>
    </figure>
</div>

Slider's animations

To apply animtions to banner sliders, you can add:

• slide-animate class to the elements.
• animation-slider class to owl carousel div.

If you want to know about animations, please read Element - Entrance Effects page.

Helper classes

Tab

Panda provides 5 types of tabs.
Use the code below to display a simple tab.

<div class="tab tab-nav-solid tab-nav-center">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#tab2-1">First tab</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab2-2">Second tab</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab2-1">
            <p class="mb-0" style="line-height: 3rem;">Adipiscicing diam block donec adipiscing 
                tristique vitae creative just fermentum iaculis enon diame faucibus interdum arcu 
                cursus euismod quisbilbuild accumsan lacus vel facilisis volutpat est velit. 
                Venenatis tellus in metus vulputate eu scelerisque felis.</p>
        </div>
        <div class="tab-pane" id="tab2-2">
            <p class="mb-0" style="line-height: 3rem;">Adipiscicing diam block donec adipiscing
                tristique vitae creative just fermentum iaculis enon diame faucibus interdum arcu 
                cursus euismod quisbilbuild accumsan lacus vel facilisis volutpat est velit. 
                Venenatis tellus in metus vulputate eu scelerisque felis.</p>
        </div>
    </div>
</div>

Testimonal

Panda provides 5 types of testimonials. Please check these in Element - Testimonal page.

Use the code below to display a simple testimonial.

<div class="testimonial testimonial-lg">
    <blockquote class="with-quote grey-section">
        <h3 class="testimonial-title">Good Customer Service</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            incididunt ut labore et dolore magna aliqua. Venenatis tellus in metus
            eu scelerisque felis.</p>
        <figure class="testimonial-author-thumbnail">
            <img src="images/elements/testimonial/agent1.jpg" alt="user" width="81"
                height="81" />
        </figure>
        <div class="testimonial-info">
            <cite>
                Samamta Willaian
                <span>Home Cleaning</span>
            </cite>
        </div>
    </blockquote>
</div>

Titles

Panda provides various types of titles.