Compare Page Settings

    When open the template from your Joomla Template manager the 5th head that you will find is "Compare Page Settings". See screenshot and scroll below for more explanation of each of these options.

     

    Compare Page Settings

     

    1. Product per Row: Number of products to be shown in a single row in Product Comparison Page.
    2. Show SKU: Show or hide SKU in Product Comparison Page.
    3. Show Price: Show or hide Product Price in Product Comparison Page.
    4. Show Short Description: Show or Hide product short description in Product Comparison page.
    5. Show Description: Show or hide Product Description in Product Comparison Page.
    6. Show Availability: Show or hide product availability information in Product Comparison Page.
    7. Show Custom Fields: Show or hide normal custom fields (which is shown under the tabular content area in product details page) in Product Comparison Page. 
    8. Show Add to Cart: Show or hide Add to Cart option and Cart attributed in Product Comparison Page.

    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 Settings

    The 6th head that you will find in the template setting page is "VirtueMart Product Tags Settings". This feature allows you to show Product Tags line New, Sold, Sale and Promo automatically based on product status. 

     

     

    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.

    Contact Us

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

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

    Stay In Touch

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

    Top