Loading...

Deprecated: Non-static method JSite::getMenu() should not be called statically in /mnt/web323/a0/03/5811403/htdocs/exclusive-fashion/2/templates/gk_storefront/lib/framework/helper.layout.php on line 152 Deprecated: Non-static method JApplication::getMenu() should not be called statically in /mnt/web323/a0/03/5811403/htdocs/exclusive-fashion/2/includes/application.php on line 536

Template articles

VirtueMart Features

  • Written by Super User
  • Category: Template articles
  • Hits: 3238

With Storefront template we’ve prepared several VirtueMart improvements which allows you to promote products and make checkout process as simple as possible. With all this features which comes built-in template or available using simple plugin you can create functional and accessible online store.

VirtueMart One Page Checkout

Specially for the Storefront template we’ve prepared additional GK One Page Checkout plugin which allows you to simplify checkout process and increase your conversion. Instead of going trough several different views like filling Billing Information, Shipping details or choosing payment now you can set all this details on one checkout view. Confirmation process is simplified and after choosing payment and shipping method and set your details you need just one click to finalise checkout.

VirtueMart One Page Checkout

Present your product images in attractive way

With additional code included in template your VirtueMart product view can include beautiful close-ups for images. All that you need to do is to hover mouse over the main image to see large preview area. This feature is working on tablet devices as well as on desktop view using touch events. Size of preview area may be specify via template settings.

Present your product images in attractive way

Show your featured products on frontpage

New News Show Pro GK5 feature in VirtueMart settings allows you to add additional badge to promote your feature products. With this feature you can show products with special price, limited or just the most popular.

Show your featured products on frontpage

AJAX cart

Thanks to our Ajax cart the shopping process has never been easier. Your customers carts are constantly and instantly updated whenever changes are made or a product is added without the need for the website to refresh.

Search module over the menu bar

Frontpage animations

  • Written by Super User
  • Category: Template articles
  • Hits: 3239

In the StoreFront template we have implemented the brand-new animation engine based on the scrollReveal.js script. This script makes creating elements onscroll animations very simple to define.

Thanks to this script you can describe an animation using natural language.

Description of the animation is placed in the data-scrollreveal attribute:

<!-- These 2 lines are equivalent -->
<p data-scrollreveal="enter top move 25px"> foo </p>
<p data-scrollreveal="enter from the top and then move 25px"> foo </p>

The full description of the syntax is available on the project documentation page

More details you can find in our article about this library

Page Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere nisi quis odio egestas non tempus est sollicitudin. Nulla facilisi. Pellentesque tempus suscipit nulla sed tempor. Phasellus et lorem id libero fermentum molestie sit amet sit amet mi. Quisque ultrices, neque et laoreet dictum, arcu sapien pulvinar odio, in aliquam mi dui eu leo. Nullam posuere, arcu et egestas fermentum, enim purus fermentum diam, quis porta mauris lectus ut odio. In tincidunt dapibus malesuada. Integer a lorem ligula. In tincidunt augue eget velit convallis nec pharetra eros tincidunt. Maecenas et tortor libero, vel malesuada est.

Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.



Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.

Donec libero urna, cursus vitae sollicitudin sit amet, elementum et massa. Donec feugiat, turpis a dictum vulputate, dui diam faucibus nunc, ac sodales augue magna id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet nisi felis. Morbi faucibus nunc id elit aliquam ac condimentum leo laoreet. Sed nec risus sed nulla mattis volutpat in eget diam. In leo nisl, eleifend vel lobortis vel, tincidunt a ligula. Nulla placerat gravida laoreet. In lobortis, ligula in sagittis pellentesque, orci magna venenatis neque, eu sagittis lacus ante et tellus. Morbi vel semper augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.

Template features

Search in the topbar

After publishing a search module (for Joomla! or VirtueMart) on the search module position, the search icon will appear in the topbar:

Search icon

After clicking this icon, the search module will appear over the menu bar:

Search module over the menu bar

Login popup

The login popup is connected with menu item which has a CSS class gkLogin - the class can be specified in the menu additional parameters. Popup displays a module published in the login module position:

Login popup

Banners

Banners with images

Banners with images are using the following structure:

<ul class="gk-banners" data-cols="3">
<li data-scroll-reveal="enter bottom and move 50px over 0.55s after 0.3s"><div><img src="/templates/2014_4/images/demo/product1_bg.jpg" alt="Product I"> <strong>100% Satisfaction<sub>Guaranteed</sub></strong></div></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.55s after 0.5s"><div><img src="/templates/2014_4/images/demo/product2_bg.jpg" alt="Product II"> <strong>100% Satisfaction<sub>Guaranteed</sub></strong></div></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.55s after 0.7s" ><div><img src="/templates/2014_4/images/demo/product3_bg.jpg" alt="Product III"> <strong>100% Satisfaction<sub>Guaranteed</sub></strong></div></li>
</ul>

The data-cols attribute specifies how many columns will be displayed.

The above code uses also the scrollReveal.js attributes for animation on scroll.

Overlays in NSP GK5

Every News Show Pro GK5 instance with the overlay suffix will display the overlay for images on hover:

NSP GK5 image overlays

Features list

Features list

The above features list uses the following structure:

<ul class="gk-features" data-cols="4">
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after"><strong>100% Satisfaction<sub>Guaranteed</sub></strong></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after 0.2s><strong>Free Delivery<sub>Anywhere worldwide</sub></strong></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after 0.4s"><strong>Students get 10% Off<sub>Lorem ipsum dolor sit amet</sub></strong></li>
<li data-scroll-reveal="enter bottom and move 50px over 0.4s after 0.6s" class="highlighted" ><strong>Call us anytime<sub>+055 5555 555 555</sub></strong></li>
</ul>

Specific item can be highlighted with adding to it the highlighted CSS class.

The data-cols attribute specifies how many columns will be displayed.

The above code uses also the scrollReveal.js attributes for animation on scroll.

Newsletter and social icons

Newsletter and social icons

The above element uses the newsletter module suffix and the following structure for generating newsletter:

<form action="#" class="gk-newsletter">
<p><input type="email" placeholder="Enter Email Address"> <input type="button" value="Sign Up"></p>
</form>

and the following code for creating the social icons list:

<ul class="gk-social-icons">
<li><a href="https://plus.google.com/+gavickpro/posts" class="icon-gplus">Google+</a></li>
<li><a href="https://twitter.com/gavickpro" class="icon-twitter">Twitter</a></li>
<li><a href="https://www.facebook.com/gavickpro" class="icon-fb">Facebook</a></li>
<li><a href="http://www.pinterest.com/robertgavick/" class="icon-pinterest">Pinterest</a></li>
<li><a href="#" class="icon-youtube">YouTube</a></li>
<li><a href="http://www.gavick.com/magazine/?format=feed&type=rss" class="icon-rss">RSS</a></li>
</ul>

Columns

Columns

Columns needs main wrapper with gkCols class and data-cols attribute:

<div class="gkCols" data-cols="2">
<div>
First column content
</div>
<div>
Second column content
</div>
</div>

You can create a layout with 2-5 columns using this structure.

Page break example

Ut dignissim aliquet nibh tristique hendrerit. Donec ullamcorper nulla quis metus vulputate id placerat augue eleifend. Aenean venenatis consectetur orci, sit amet ultricies magna sagittis vel. Nulla non diam nisi, ut ultrices massa. Pellentesque sed nisl metus. Praesent a mi vel ante molestie venenatis.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Register to read more...