Pav Dress Documentation

Firstly, we would like to thank you for purchasing Pav Dress and chosen it for your website. We outline all kinds of good information, and provide you with all the details you need to use Pav Dress.

If you are unable to find your answer here in our documentation, feel free to ask for help from our support team, all you have to do is submitting a ticket via our Support Ticket system.

Opencart 2.0.x and Layout Builder

Pav Opencart is native with OpenCart 2.0.x, the latest version of OpenCart and it's powered with the best Opencart page builder, you can check out the video tutorial HERE →

Here are some significant changes in Opencart 2.0.x

  • Google reCAPTCHA added for contact page and product reviews
  • Amazon Login and Pay module added
  • Global Payments module added
  • PayPal merchant on boarding added to PayPal Express module

Pavo Dress OpenCart theme Overview

Pav Dress is a responsive OpenCart theme for Dress, Fashion, and Beauty. The OpenCart theme is developed with Pavo Framework version 4, LESS, it integrates Bootstrap 3, Font Awesome, supports HTML5 and CSS3. Pav Dress menu system is powerful with MegaMenu and Off-canvas.

The theme also supports many modules that will help you save time and money to build a full functionality E-commerce website.

  • Pav MegaMenu
  • Theme Control Panel
  • Pav Banners Builder
  • Pav Blog Management
  • Pav Blog Category Module
  • Pav Blog Latest Comment Module
  • Pav Blog Latest Module
  • Pav Custom Module
  • Pav Layers Sliders
  • Pav Popular Tags
  • Pav Product Carousel
  • Pav Products Tabs Module
  • Pav Reassurance

You can have a complete E-commerce website in some simple steps with our sample data package included when you install the theme.

The instruction is to help you with installation of the Pav Dress.

Download packages

To download Pav Dress, please check it out at:

Once the download is complete, unzip the file and you would see the following packages:

  • Guides - our detail documentation for the theme
  • Quickstart package - for quickstart installation
  • Theme folder - for manual installation
  • Modules - the installation packages of all modules used in the theme
  • Source - the PSD files of the theme
  • Licensing - the theme license

System Requirements

OpenCart requires certain technical requirements to be met for the store to operate properly. First, a web server must be created to make the OpenCart store publicly available on the web. Domain names and hosting services can easily be purchased for an affordable price.

When selecting a hosting service, you should check to see that these server requirements are provided and installed on their web servers:

  • Web Server (Apache suggested)
  • PHP (at least 5.2)
  • Curl enabled
  • Database (MySQLi suggested)

Quickstart Installation

The Quickstart Package includes Opencart core, Pav Dress theme, Extensions supported for the theme, and Sample data. Quickstart is the best choice for beginner to explore back-end settings and for new site building. Installing the Quickstart steps is just like Opencart installation, after the step, you will have a site that is exactly the same as our demo site.

Installing in Localhost or installing on your hosting is almost the same. Here is the quick guide to install Quickstart in localhost.

  • Step 1 - Create a folder in htdocs folder for Xampp, www folder for Wamp
  • Step 2 - Unpack the Quickstart package then copy all the files and folders to the new created folder.
  • Step 3 - Create database: You can create a database in your hosting provider's control panel, for example cPanel. It may also be possible to do so in phpMyAdmin. Remember to take note of the details that you use as you'll need them for the next step.
  • Step 4 - Auto - installer: The final step is to run the auto-installer. Open your favourite web browser and add “/install” to the end of your site's website address. When doing this you should see with the following page:

The 4 steps in the auto-installer wizard.

  • Accept License: Click “Continue” after reading the GNU licence.

  • Pre-Installation: The pre-installation page checks that your server meets the minimum requirements. If there are any issues then you may need to contact your hosting provider. Assuming that everything is okay, click the “Continue” button.

  • Configuration: In section one, enter the database details that you used in step 3 and in section two enter your desired admin username, password and email address. Once all of the information is entered, click the “Continue” button.

  • Finished: That's it! Now delete or rename the installation directory and you're DONE.

Theme Installation

Before you install this theme:

  1. Read our complete instruction to install theme
  2. Make sure you have installed and running the correct version of OpenCart: OpenCart 2.0.x
  3. Take a FULL BACKUP for your site

We recommend to use this theme on a new, clean installation or existing shops without custom core modifications.

Steps to install Pav Dress Theme manually:

Step 1 - Unzip the theme package

After unzip the download package, please unzip the theme package -

Step 2 - Upload theme to your OpenCart site root directory

Module Installation

Step 1 - Unzip the module package

Step 2 - Upload the folder admin, catalog,... in the Module package that you want to install to the root directory of your OpenCart site

Step 3 - When you install Dress theme manually, please unzip the Quickstart file: pav_dress_full\\image. Then go to image folder and copy to theme folder.

Step 4 - After uploading all the folders, you can install it as Quickstart installation

Step 5 - Go to your OpenCart site admin panel, navigate to: Extensions → Modules, find the module you just uploaded then hit the "Install" button to proceed with the module installation.

After installing all modules, please navigate to System → Design → Layouts

Click on the Edit button to choose the page you need to edit then click on the Add module button.

Choose any module you want and assign the position for it

Supported themes/layouts

Pav Dress is a OpenCart theme. It supports 5 skins: Default, Blue, Green, Orange and Red. Each skin has different color; meanwhile, layout structure is the same.

Dress theme/layout

Active Theme

Once the theme is uploaded, access your admin panel, navigate to: Admin > System > Settings, select Store > Edit

Next, select Store tab and set Pav Dress as your default store

Image Size Adjustment

In the Image setting panel, configure the image size for category, product thumbnail, product popup, etc that fit your layout best.

Pav Dress supports Theme Control Panel module that allows you to manage your theme and customize your theme easily based on tons of options built in such as Custom Font, Layout management, compression, etc.

From your OpenCart site admin panel, go to Admin > Extensions > Modules, open the setting panel of Theme Control Panel module.

General Settings

In the General setting, you can see a lot of settings. The screenshot below is based on our Demo site.

Here are the main things that you can do with the General setting panel.

  • Select theme for your site: Default, Blue, Green, Orange and Red.
  • Theme layout width: You can design width for your layout or using auto mode by adding auto in the Theme Layout Width field.
  • Using customized copyrights info or not
  • Enable or disable OffCanvas Sidebars
  • Enable or disable Footer Center
  • Enable Panel Tool: The tool is to quickly change theme, layout, header layout, etc on front-page of your site
  • Template Layout Mode: Select mode for your template layout - Full Width, Boxed Large
  • Enable Quickview: Enable or disable Quickview product.
  • Logo Type: Choose Logo In Theme or Logo OpenCart

Pages Settings

Depend on page type, there are different settings. Select the page you want to edit then change the page setting using the available parameters.

Font Settings

The Font setting panel allows you to customize font for your whole site or for specific elements in your site such as heading, module heading, body. Google Font is supported.

Static Modules Settings

Static module is a OpenCart static module, depend on theme type, there are different modules. Select the module you want to edit then change the static module settings.

1. Contact Us

HTML code

<div class="image"><img alt="Banner About" src="image/catalog/demo/img-about.png"></div>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing nulla facilisis interdum venenatis nullam vulputate cursus nisi quis volutpat curabitur id mauris a ante volutpat varius.<br>					Lorem ipsum dolor sit amet consectetur adipiscing volutpat varius. Morbi iaculis nisl non arcu suscipit tempor id pretium blandit.</p>
<div class="social">						
	<li class="pinterest"><a href="#"><span class="fa fa-pinterest stack"><span>Printerest</span></span></a></li>
	<li class="google"><a href="#"><span class="fa fa-google-plus stack"><span>Google Plus</span></span></a></li>
	<li class="facebook"><a href="#"><span class="fa fa-facebook stack"><span>Facebook</span></span></a></li>
	<li class="twitter"><a class="twitter" href="#"><span class="fa fa-twitter stack"><span>Twitter</span></span></a></li>

2. Facebook

Layout Settings

Thanks to the Pavo Framework version 4, Pav Dress comes with powerful theme configuration admin panel that allows you to customize the theme easily without touching any file. You can customize font, changing logo, changing skin, etc.

Pav Dress supports a lot of layouts, you can configure, customize any layout you want easily with the visual layout configuration. You can move a position to any place in the layout, assign any module to a position, etc.

Quickly edit a module

Hit the Edit icon in the module loaded in the layout and you can edit settings of the module in a popup.

Changing position to any place in the layout

You can move a module to any position inside the layout panel, there are some hard fixed positions, blocks that you can not move such as Header, Footer.

Configure number of columns for each position

For each position, you can configure number of columns for it. The column setting is based on Bootstrap grid system of 12. If you select 3 columns for slideshow position then each column width is 4 grids.

Sample Data Settings

Sample data is an important part of any site, importing, exporting back-up sample data is a regular work. It's quite complex and risky if you do it manually. Theme Control Panel module helps you solve all the difficulties with the Sample Data management system.

CSS and JS Compression

Compression Feature allows to speed up your site by merging, compressing JS and CSS files.

All cached files are stored in folder system/cache/pavo-assets/. To clear cached you click to CLEAR button on the top right side corner of your setting panel.

CSS and JS Customization

You can add CSS rules and JS to customize for your site. The CSS rules and JS added in the panel will have highest priority so it will override the styles in your CSS files.

Live Theme Customization

This is amazed feature in our product. The feature is to customizing your theme with pre-define parameters such as font size, text color, background color, font family, etc.

Here is the steps to customizing your site with Live Theme Customization

Step 1 - Open the Live Theme Customization panel

Step 2 - Customize your site with pre-defined parameter.

The Live Theme Customization panel includes 2 main sections: the setting panel (include all pre-define parameters) and your site front-page. When you change setting of a parameter, you would see the change in the front-page at the same time.

Step 3 - Save the customization when you're done by hitting the "Submit" button.

Pav Dress supports a lot of Pav modules that help you build a full Ecommerce functionality and help with content building for your site easier. Here is the instruction to use the extension the way they are used in Pav ExtremeShop demo site.

Pav MegaMenu module

Pav MegaMenu module helps you create MegaMenu menu for your Opencart site. The visual configuration panel allows you to see the structure of the menu in front-page. What you change is what you see.

To configure MegaMenu, please go to: Extensions > Modules, find the Pav MegaMenu module then hit the "Edit" button. There are 3 main sections in the panel: the Menu management system, Widget management system and MegaMenu configuration panel.

Menu management system

The Menu management system allows you to:

  • Edit any menu item: Click on edit icon of the menu item you want to edit, then edit the settings of the menu item in the right panel.
  • Change menu item's position: Drag and drop the menu item to change its position, after changing the order of menu items, please hit the Update Order, the saving option in the panel does not save the order change of menu item.

Widget management system

To go to Widget management system, please click on the Live Mega Menu Editor button in Pav MegaMenu module.

The widgets are used to assign to MegaMenu. You can create as many widgets as you expect. The content of widget can be chosen from Filter By Name box or Filter By Group: Blog, Typo, Opencart, Social, Image, Others.

You can create a new submenu for any widgets by hitting the "Setting" icon or delete the widget that is not used any more.

To create a new widget, please hit the Create Widget icon in the upper right corner.

  • Select Widget type: There are a lot of widget types such as Blog, Typo, Opencart, Social, Image, Others.
  • Add content for the widget: The content is depend on what widget type you select, add the required info and save the widget.

MegaMenu Configuration

In the main setting panel of MegaMenu, hit the Live MegaMenu Editor to access the MegaMenu configuration panel.

In the configuration panel, you can:

  • Create sub-menu for any menu item, assign widget for the sub-menu and configure size of the sub-menu block.
  • Add row, column inside created sub-menu block.
  • Add class to style for column, row in sub-menu.
  • Align sub-menu block: left, right, center

Pav Banners Builder module

The module allows you to add any banner to display in Pav Banners Builder module. All you have to do is adding banners you want to display in it, edit width, height, position,...

To configure the module, please go to: Extensions > Modules, find the Pav Banners Builder module then hit the "Edit" button to go to its setting panel.

1. Adv Home Left

2. Adv Home Right

3. Banner Sidebar

Pav Blog module

This is the platform for Blog on Opencart. You can create categories, blog items and get it displayed in front-page brilliantly. The module comes with a lot of settings that allow you to manage your blog post easily. It also includes comment system, a lot of modules such as Category module, Most Read blog module, Latest Comment module and Latest blog module.

To manage Your Blog system, please go to: Extensions > Modules, find the Pav Blog module then hit the "Edit" button to go to its setting panel.

General Settings

General setting

Category Page setting

Blog setting

Category Management

Blog Management

Comment Management

Category Module setting

Front-end appearance of the module

Latest Comment Module setting

Front-end appearance of the module

Latest Module setting

Front-end appearance of the module

Pav Custom module

The module allows you to create content using HTML added to the content field.

To configure the module, please go to: Extensions > Modules, find the Pav Custom module then hit the "Edit" button to go to its setting panel.

There are a lot of custom HTML used in the site. We will show you one by one.

1. Custom Home Showcase

HTML code

<div class="webcome">
<div class="image"><img alt="Banner Wellcome" src="image/catalog/demo/wellcome.png"></div>
<div class="web_block">
<h1>Welcome to Dress Store OpenCart Theme Demo Store</h1>
<h2>Perfect shopping cart solution for everyone!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mi eros, facilisis ac mollis et, ullamcorper non neque. Cum sociis natoque penatibus magnis dis parturient montes, nascetur ridiculus mus. Sed ac pretium dui. Praesent arcu dui, convallis eget facilisis in, vulputate ut lacus. ultricies laoreet malesuada.</p>

2. Custom Home Shopnow

HTML code

<div class="highlight-image"><img alt="Banner Shop" src="image/catalog/demo/shop.png">
<h3 class="highlight-viewall"><a href="index.php?route=product"><span>shop now</span></a></h3>

Pav Layers Sliders module

To configure the module, please go to: Extensions > Modules, find the Pav Layers Sliders module then hit the "Edit" button to go to its setting panel.

Pav Popular Tags module is used to display list of products tags. Here you can search quickly keywords by clicking on keywords in the module.

To configure the module, please go to: Extensions > Modules, find the Pav Popular Tags module then hit the "Edit" button to go to its setting panel.

Pav Product Carousel module is to display list of products in carousel. The products are selected based on: Featured, Latest, Best Seller, Most Viewed, Special, Top Rating.

To configure the module, please go to: Extensions > Modules, find the Pav Product Carousel module then hit the "Edit" button to go to its setting panel.

Pav Product Tabs module

Pav Product Tabs module is to display list of products in the website. The products are selected based on: Latest, Featured, Best Seller, Special, Most Viewed.

To configure the module, please go to: Extensions > Modules, find the Pav Product Tabs module then hit the "Edit" button to go to its setting panel.

Pav Reassurance module

Pav Reassurance module is to manage customer care services in your store such as: Feature, Support, Free Shipping and Mauris nisi.

To configure the module, please go to: Extensions > Modules, find the Pav Reassurance module then hit the "Edit" button to go to its setting panel.

These are default Opencart modules but it's style has been customized to fit the theme design.

Special module

The module is to display list of special product in your OpenCart site. Its setting is so simple, just add layout, position that the module is displayed in and product image size.

To configure the module, please go to: Extensions > Modules, find the Special module then hit the "Edit" button to go to its setting panel.

Category module

The module is to display list of category product in your OpenCart site. Its setting is so simple, just add layout, position that the module is displayed in and product image size.

To configure the module, please go to: Catalog > Categories and you can see the list of category product in your site.

If you are unable to find your answer here in our documentation, please go to our forum and post up a new topic with all the details we need. Please be sure to include your site URL as well or send us an email.

Our support scope

Our support covers configuration, building site as demo, trouble using any features, and bug fixes. We don't provide support for customizations or 3rd party extension.

Our support time

We try our best to monitor the email around the clock, however, this is not always possible due to different time zones. We will try to reply you as fast as we can.

Our working time is 8.00 AM - 5.30 PM, Monday to Friday (GMT+7). So if ask for help in the weekend, you may have to wait a little bit for support and please be patient.