All you need to get a beautiful online store is this store template and the Uikit3 framework installed. It can be a template for a website from the Yootheme studio or a free Master3 template that includes this framework. Alternatively, you can install Uikit3 separately using the installation guide in the documentation on YooTheme.
Features of the Balou template for JoomShopping are that it does not need styling for your site. It uses the styles of the site template on Uikit3, which allows you to integrate it without additional steps to adapt the store interface to the interface of the entire site. In addition to styling store elements, the template has many additional features that differ from the standard JoomShopping template.
The store template is responsive and automatically adjusts to any screen size and rebuilds blocks of information for comfortable reading and interaction with interactive elements, both on desktop and mobile devices.
All product blocks in the product list of a category take the height of the row, creating an even grid and neatly rendering the storefront. The product images in the product list are visually the same size, regardless of their actual dimensions and aspect ratio. Product photos with the wrong aspect ratio are centered and partially displayed. Small images are stretched, large images are compressed (no distortion).
Product template (detailed product description card) is perhaps the most important part of an online store. It is here that most often the buyer decides to buy or not buy this product. Therefore, special attention was paid to the product template. Getting to the product page, on the first screen, the user sees a large photo in detail, a title, a short description, and its characteristics. The price is deliberately lowered down so that the buyer can first familiarize himself with all the advantages of the product and more adequately perceive it. This is useful for expensive and quality brands, where price is not the main thing.
Four tabs are made under the name of the product: description, payment, delivery, contacts.
The description tab displays a short description of the product and its characteristics. Feature descriptions are displayed in tooltips.
The remaining tabs display positions of modules with the following names:
If there are no published modules in any of the positions, then the tab for this position is not displayed.
Below are the attributes styled as a list of characteristics, which, when the Description tab is displayed, creates a single block of characteristics with attributes.
Another module position has been created under the attributes called product_sizes. In the demo version of the template, in this position the html module is displayed with a button to open the table of shoe sizes. You can use this position at your own discretion.
Slideshow of product images and videos is adaptable to any screen size (modern device) and maintains the specified aspect ratio, regardless of the size of the images. This allows you not to resize images before uploading to the site. The video will be displayed correctly both as added by the file to the site, and added by the inserted link, for example from Youtube.
The template uses the built-in capabilities of the Uikit3 framework and supports lazy loading of images (until they fall into the viewport on the screen or display on hover). All images of products and categories that are displayed in the template have lazy loading to speed up page loading by reducing the amount of information required to load at a particular moment of viewing. You should take care of using this functionality to display images inserted into the description of categories and products yourself, using the documentation for Uikit3.
Given the importance of traffic volume on smartphones with mobile Internet, and in order to reduce the amount of downloaded information, the template checks the visitor's device. For mobile devices, the middle image is displayed in the category and in the product (which can be enlarged by the link), for desktops and laptops, the full photo of the product is displayed.
A lot of attention has also been paid to the product price display. Since the store functions allow displaying prices in several versions, the template implements two ways to display prices by condition.
Price for product without wholesale prices (discounts from quantity).
Product with wholesale prices.
In the first case, the price is displayed in the standard version - one price value for the product and the field for entering the quantity of the product is hidden.
In the second case, a field for entering the quantity is displayed (with + / - buttons). Wholesale prices are arranged in line form and displayed in reverse order, first the lowest price, and then on increasing (for a smaller quantity of goods). This allows the buyer to focus on a more interesting price offer for him. The price for the customer based on the selected quantity is displayed above the buy button.
If there are related products, a slider with products is displayed above the detailed description of the product. This way, related products will not escape the eyes of the buyer, and you have a chance to sell him more than he originally planned to buy.
The form for writing a review is displayed in a pop-up window (the input form does not take up space on the page), and the reviews themselves have the usual form of messages in messengers. For the feedback message, the styles from the comment component are used, which are customizable in YooTheme Pro Builter.
For withdrawal, the client's avatar can be displayed if he is registered on the Gravatar website and leaves in the comment the same email address as for the Gravatar account.
When you enable the option to show Hits and if the product has reviews, an icon with the number of reviews and a link for smooth transition to the reviews block will be displayed at the top of the page, above the slideshow.
The template uses own images of rating stars, in scalable vector graphics format. This makes them as crisp as possible at any screen resolution, on any device, and at the same time they have the smallest file size.
The template includes micro-markup for additional SEO. It allows the search robot to understand what is on the page and how to display it in search results. Rating stars, price, availability, product image and everything you need is displayed in the search snippet thanks to the presence of micro-markup on the page.
For a short description of the page (meta description), “Buy + [product name] + [min. price] + [main currency] ".
The above methods allow you to ensure and / or accelerate the withdrawal of your store's products to the TOP, without resorting to ordering (rather expensive) services of website promotion specialists. Proper template markup will allow you to offset the initial SEO costs and focus on creating the right informative product descriptions.
Shopping cart in the Starter template for JoomShopping is also responsive, so the buyer can view the contents of the cart in a convenient way, both from a computer and from a mobile device.
One of the main problems of online stores is abandoned carts and unfinished orders. This happens for many reasons, and mainly these are flaws in the interface of the order page, which make the purchase through the cart not convenient, too complicated or questionable. The template implements a friendly approach to the client at all stages of ordering. Each step of the order has clear and easy-to-follow directions to guide the visitor to complete the online purchase.
No reviews yet. Be the first to leave it.
Write a comment for this product!
Balou UK3 template for JoomShopping
Created on the basis of the free UIKIT 3 framework. The framework is not included in the template and is installed on the site separately from the template.