1. Start
  2. Install Quickstart
  3. Config theme
  4. Install Module
  5. layout
  6. Theme control Panel
  7. Content slider module
  8. megamenu
  9. Product Carousel module
  10. Pav My Twitter
  11. Category Module
  12. Banner Module
  13. Custom Module
  14. Pav Gallery Popup Module

Pav Metro Guide


THANK YOU FOR PURCHASING OUR THEME! Here are some basics on installing, configuring and customizing the PavTheme, BEFORE WE GO The theme and the sample data is provided "as is". Customizing code and other design related issues can be done as freelance work on a $50-100 hourly rate only with Paypal and/or Skrill, if PavTheme's available. If you are new to Opencart, please understand I cannot fix your site for free. PavTheme would love to help everyone but there is no time. I suggest reading documentation available online regarding using Opencart, server requirements, etc. Thank you! PavTheme Team

Install Quickstart


The Quickstart Package consists on a complete Opencart! + Template + Various Extensions + Sample Content, excellent for beginner users to explore back-end settings and sample content. Installing the Quickstart is just like installing Opencart!, but you will have the full demo of the theme on your server. Once your environment is ready, follow this quick guide:

 

Config theme


Goto Admin > System > settings

select store > edit

select Store tabs

 

Config image

Install Module


1. Please unzip package Module and upload the folder admin,catalog ...  from the Module package to the root directory of your Opencart software using an FTP client.

2. Go to Admin > Extensions > Modules . Find and install it or uninstall

Module Using in pav_metro theme

Pav Content Slider
Pav Custom Module
Pav Gallery Popup Module
Pav MegaMenu
Pav Product Carousel
Pav My Twitter

layout


Theme control Panel


PAV Theme Control Pannel

goto admin > Extensions > Modules

edit Theme Control Pannel

Tab Modules- Layouts


Tab Genaral

Tab Font

Content slider module


Pav Content Slider

preview

goto admin > Extensions > Modules

Edit  Pav Content Slider

Configuration like images

megamenu


Pav MegaMenu

preview

goto admin > Extensions > Modules

install and Edit  Pav MegaMenu

Configuration like images

Create submenu type HTML

Source

<div class="pav-menu-video"><iframe allowfullscreen="" frameborder="0" height="157" src="http://www.youtube.com/embed/NBuLeA7nNFk" width="279"></iframe>
<h3>Lorem ipsum dolor sit</h3>
<p>Dorem ipsum dolor sit amet consectetur adipiscing elit congue sit amet erat roin tincidunt vehicula lorem in adipiscing urna iaculis vel.</p>
</div>

 

Pav My Twitter


Install Pav My Twitter

preview Pav My Twitter Module

edit Pav My Twitter Module

goto admin > Extensions > Modules

install and edit Pav My Twitter

Configuration like images

Category Module


preview

install and edit category Module

Configuration like images :

Custom Module


install and edit Pav Custom Module

Add module

1. slideshow

goto admin > Extensions > Modules

install and edit Pav Custom Module

Configuration like images

<div class="pav-block-welcome">
<p class="pav-arrow-left hidden-phone hidden-tablet">&nbsp;</p>
<p class="pav-arrow-right hidden-phone hidden-tablet">&nbsp;</p>
<div class="row-fluid">
<div class="span7">
<div class="pav-block-left">
<h2>Welcome to Metro Store</h2>
<p>Morbi felis ligula scelerisque id ullamcorper fermentum adipiscing donec ac molestie metus.</p>
</div>
</div>
<div class="span5">
<div class="pav-block-right"><a class="btn" href="#" title="By theme now">By Theme now</a></div>
</div>
</div>
</div>

 

2. promotion

preview

Configuration like images

Source

<div class="pav-block-shipping clearfix"><img alt="Free Shipping" class="pull-left" src="catalog/view/theme/pav_metro/image/free-shipping.png" />
<h3 class="offset3">Free Shipping</h3>
<p class="offset3"><span>On orders over $ 99</span></p>
</div> 

Configuration like images

source

<div class="pav-block-sale clearfix">
<div class="pav-block-content pull-left">
<h3>Sale</h3>
<p><span>Up to 70% Off</span></p>
</div>
<img alt="Sale" class="pull-right" src="catalog/view/theme/pav_metro/image/sale.jpg" /></div>


source

<div class="pav-block-spring clearfix">
<div class="pav-block-content pull-left">
<h3>Spring</h3>
<p><span>Shoes Sale</span></p>
</div>
<img alt="Spring" class="pull-right" src="catalog/view/theme/pav_metro/image/spring.jpg" /></div>

 

3.Footer Top

preview

Configuration like images

source

<div class="row-fluid">
<div class="span4">
<div class="pav-block-spring-collection clearfix"><img alt="Spring Collection" class="pull-left" src="catalog/view/theme/pav_metro/image/spring-collection.png" />
<h3 class="offset3">New amazing</h3>
<p class="offset3"><span>Spring collection</span></p>
</div>
</div>
<div class="span4">
<div class="pav-block-extra clearfix"><img alt="All Products" class="pull-left" src="catalog/view/theme/pav_metro/image/extra.png" />
<p class="offset3">Extrasale 40%<span>for</span></p>
<h3 class="offset3">all products</h3>
</div>
</div>
<div class="span4">
<div class="pav-block-new-collection clearfix"><img alt="New Collection" class="pull-left" src="catalog/view/theme/pav_metro/image/new-collection.png" />
<h3 class="offset3">New collection</h3>
<p class="offset3"><span>Inspired By nature</span></p>
</div>
</div>
</div>

 

4. Content Bottom:

preview

Configuration like images

 

source

<div class="pav-content-bottom">
<div class="row-fluid">
<div class="span3"><img alt="" src="catalog/view/theme/pav_metro/image/static3.png" /></div>
<div class="span7">
<h3>100 kindle fire hd <span>$3.99</span> or less</h3>
<p>Nunc gavida nisl utrices loborti molis temp tempor quam congue turpis sed psum blandit donec vitae laoreet vestibulum lobortis mattis sapien bero cursus congue urna mauris.</p>
</div>
<div class="span2"><a class="circlehover with-symbol" data-align="right" data-position="top-left" data-size="" href="#"><span class="text">Find out more</span> </a></div>
</div>
</div>

5: Footer Center

preview

Configuration like images

source

<div class="pav-social">
<ul>
<li><a class="facebook" href="#" title="Facebook">Facebook</a> <a class="twitte" href="#" title="">Twitte</a></li>
<li><a class="dribbble" href="#" title="Dribbble">Dribbble</a> <a class="vimeo" href="#" title="">Vimeo</a></li>
<li><a class="google" href="#" title="Google plus">Google plus</a> <a class="email" href="#" title="">Email</a></li>
<li><a class="rss" href="#" title="Rss">Rss</a></li>
</ul>
</div>

 

Configuration like images

Source

<div class="pav-about">
<ul>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Nam cursus nunc</a></li>
<li><a href="#">Fermentum</a></li>
<li><a href="#">Consequat</a></li>
<li><a href="#">Morbi mauris</a></li>
<li><a href="#">Praesent felis</a></li>
<li><a href="#">Molestie nec nibh</a></li>
</ul>
</div>

 

Configuration like images

 

Source

<div class="pav-newsletter">
<h4>Sign Up for Our Newsletter:</h4><p>Get the word out Share this page with your friends and family. Enter your email address...</p><div class="subscribe row-fluid"><input name="subscribe" type="text" value="" /> <input type="button" value="" /></div><div class="payment-method"><a href="#" title=""><img alt="paypal" src="catalog/view/theme/pav_metro/image/paypal.png" /></a> <a href="#" title=""><img alt="visa" src="catalog/view/theme/pav_metro/image/visa.png" /></a> <a href="#" title=""><img alt="master" src="catalog/view/theme/pav_metro/image/master.png" /></a> <a href="#" title=""><img alt="amex" src="catalog/view/theme/pav_metro/image/amex.png" /></a></div>
</div>