Typography

VP MegaMart template is built on Twitter Bootstrap Ver 2.2.1. Bootstrap comes with various typography and content display options and with this template you can make take full benefit out of it. It allows you to show texts and images with various useful styles. It also has a nice icon display features. 

Some Examples:

 

Headings:

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

 

Emphasis classes:

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Code:

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

 

There are many more features available and you can find them on Twitter Bootstrap Github: http://getbootstrap.com/2.3.2/base-css.html

prettyPhoto Lightbox

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

prettyPhoto APIs have been integrated within VP MegaMart template so you can make full use of its features. It is very easy to setup your own image gallery or modal image/video zoom within your am article or in module.

Some Examples

Single Image:

prettyPhoto can open single images. To do so, simply: Create a link (). Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”). Change the href of your link so it points to the full size image.

You can also add a title and a description to your picture: To have display a title, add the title into the ALT attribute or your thumbnail image. To have display a description, add the description into the TITLE attribute or your link.

Demo:

This is the title

Code:

<a title="This is the description" href="images/prettyphoto/1.jpg" rel="prettyPhoto">
<img class="img-polaroid" alt="This is the title" src="images/prettyphoto/thumbs/t_1.jpg" width="50" height="50">
</a>

Image Gallery:

To open an image gallery simply: Create a link (). Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“). Change the href of your link so it points to the full size image.

Demo:

Red round shape Nice building Fire! Rock climbing Fly kite, fly!

Code:

<a href="images/prettyphoto/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
<a href="images/prettyphoto/2.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_2.jpg" width="60" height="60" alt="Nice building" />
</a>
<a href="images/prettyphoto/3.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_3.jpg" width="60" height="60" alt="Fire!" />
</a>
<a href="images/prettyphoto/4.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_4.jpg" width="60" height="60" alt="Rock climbing" />
</a>
<a href="images/prettyphoto/5.jpg" rel="prettyPhoto[pp_gal]">
<img class="img-polaroid" src="images/prettyphoto/thumbs/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" />
</a>

Read more about jQuery lightbox for images, videos, YouTube, iframes, ajax | Stéphane Caron – No Margin For Errors on: www.no-margin-for-errors.com

Advanced Options

If you are a designer and want to customize template as per your need then the advanced options section of the template is your solution. It gives you the freedom to add your own custom css file to the template. You can even place this custom css file outside the template directory if you want. Any future template update will no affect to this custom css file therefore you your customization will never get lost even after the template update.

It also has two separate text fields for head and body section of the template through which you can add custom Javascripts or css or meta tags as per your need. You can even add your Google Analytics tracking codes here. You will never have to edit the actual template files for this and they remain unaffected by any future template update.

 

Advanced Options

VirtueMart Product Tags

The 4th head that you will find under Basic Options of the template is "VirtueMart Product Tags". This feature allows you to show Product Tags line New, Sold, Sale and Promo automatically based on product status. 

 

VirtueMart Product Tags

 

Lets explain these one by one:

  1. Show New Tags: This options allows you to show New tag for the product whose Availability Date falls between the New Product Tag Days and present date.  
  2. New Product Tag Days: Set the days for which New Product Tag will be displayed from the date of product availability. 
  3. Show Sold Tags: This allows you to show Sold tag against the products if the product is not available i.e. either out of stock or availability date is set to a future date. 
  4. Show Promo Tags: This option allows you to show Promo tag for the products which are assigned as Featured Products in your store.
  5. Show Sale Tags: This options allows you to show Sale tags for the product which has some discount rule assigned. 

The template comes with the PSD file for these tag images and you can alter the text or color of the tags if you need by creating your own tag images using the PSD file.

VirtueMart Options

The 3rd head that you will find under Basic Options of the template is "VirtueMart Options". See screenshot and scroll below for more explanation of each of these options.

 

VirtueMart Options

 

  1. Hide Side Modules in Product Page: This enables you to hide the modules publish at left and right module positions in Product Details Page to utilize the full body width of the template.
  2. Hide Side Modules in Cart Page: This enables you to hide the modules publish at left and right module positions in Cart Page to utilize the full body width of the template.
  3. Hide Sidebar, Manufacturer & Related Products in Product Page: This enables you to hide VirtueMart sidebar layout position, manufacturer and related product column which is normally shown at the right side in Product Details Page. This is option is disabled by default. You can enable if you need.
  4. Manufacturer Sorting: Enable/disable Manufacturer Sorting field in Category Page.
  5. Activate Manufacturer Details Page Link in Product Page: This allows you to enable or disable the Manufacturer Logo or Name in Product Details page to be linked to Manufacturer Details Page.
  6. Add to Cart button in Product Listing Pages: Show/hide Add to Cart button in Product Listing pages. Disable this if you do not want the products to be added to cart from product listing pages. 
  7. Enable Cloud Zoom: Enable or disable mouse over image Cloud zoom feature in Product Details Page. 
  8. Show Quantity field in Product Details Page: Show or hide Quantity Selector in Product Details Page.
  9. Show SKU: Show or hide SKU in Product Details Page.
  10. Show Social Buttons in Product Details Page: Show or hide social sharing buttons in Product Details page. These buttons are provided by AddThis.com
  11. Show Discount Percentage: Show or hide Discount Percentage below price display area. 
  • asmithumb
  • caronthumb
  • cilithumb
  • diyathumb
  • expresso
  • frinto
  • masti
  • nekonthumb
  • oh-mia
  • ralph_karen
  • the-car
  • y-series

Contact Us

Vestibulum sed et justo Vestibulum Vestibulum natoque orci porttitor Proin felis.

+61-1-924073456
info@vp-megamart.com

Stay In Touch

Follow us. Don't miss important updates in future.

Top