We have created a universal Techno template based on the UiKit 3 framework for the JoomShopping online store, which is suitable for a store of almost any topic (household appliances, mobile phones, toys, clothes, jewelry, food, tools, etc.). This is realized due to the presence of its own options for displaying certain information, which were not provided by the developer of the online store JoomShopping, but which, in our opinion, are necessary. The options allow you to customize the interface of your electronic trading platform, and create both the most informative website and a modern online store in the minimalist style, without having to rework the template.
Due to the fact that the Techno template does not have its own visual styles and completely copies the style of your site (fonts, block colors, buttons, shapes, padding sizes, etc.), this makes it easy to apply it on any site that uses UiKit3 * framework without additional styling modifications. On the template demo site, you can see how the same store template is displayed differently in different categories depending on JoomShopping settings and Joomla! Template design.
* This can be a template for a site from Yootheme studio or a free template Master3, which includes this framework. Or you can install Uikit 3 separately using the installation guide found in the documentation section of the YooTheme website. Also, you can buy a ready-made website (online store), which includes this template, Master 3 template for Joomla! and all the necessary modules that allow you to instantly launch your online store at no additional cost.
The store template automatically adjusts to any screen size and rearranges blocks of information for comfortable reading and interaction with interactive elements, both on desktop and mobile devices.
All product blocks in the category product list take the height of the row, creating an even grid, and neatly render 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 reflected. Small pictures are stretched, large ones are compressed (without distortion).
Each product in the category has its own slideshow with personal images. Don't worry about the amount of data loaded and page load speed. All product images are loaded only after they enter the viewing area or display in a slideshow.
Additional product parameters (characteristics, availability, short description, etc.) are reflected in the panel pop-up under the product when you hover the cursor over the product block or after a single touch of the product on your mobile phone.
The number of products in a row is specified in the store settings. Values from 1 to 6 are supported. When you resize the viewport on the screen, the number of items in a row changes automatically, proportionally to the reduction in the viewport size.
A vertical navigation slideshow is implemented in the detailed product description card for large screens. Dot navigation is displayed on mobile devices.
Under the buy button, added the position of theproduct_bottommodule, where you can place information about promotions or additional data about the section's products. Also added a module position to the right of the price (product_right), where the store contacts and / or short terms of payment and delivery are usually indicated.
If there are related products, a slider with products on a detailed description of the product is displayed. This way, related products will not escape the eyes of the buyer, and you have a chance to sell him more than he planned to buy at first.
The slider has smooth scrolling, while the drop-down panel for products works here as well (unlike most other sites with a similar implementation of displaying additional information, where either there are no drop-down panels or the slider does not have smooth scrolling).
To separate product information, descriptions, specifications and reviews are displayed in separate tabs. The panel also contains three additional tabs for payment details modules (product_payment), delivery (product_delivery) and contacts (product_contacts). If there is no information in any tab (except for reviews, if they are enabled in the store settings), the tab is not displayed.
To quickly jump to the desired block of information, the tabs are duplicated at the top of the page under the name of the product. (Top tabs can be turned off in template options).
The template uses the built-in capabilities of the Uikit3 framework and supports lazy loading of images (until they reach the viewport on the screen or display when viewing a slideshow). All product images and category s, which are displayed in the template, have a delayed loading to speed up page loading. You should take care of using this functionality for displaying 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. Mobile in the category and in the product the middle image is displayed (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 reflection of product prices. Since the store functions allow displaying prices in several versions, the template implements two ways to display prices by condition.
The price for a product without wholesale prices (discounts from quantity).
Product with wholesale prices.
In the first case, the price is displayed in the standard version - one value of the price of the product and the field for entering the quantity of the product can be hidden in the template settings.
In the second case, a field for entering the quantity is displayed (with + / - buttons). Wholesale prices are arranged in lowercase and displayed in reverse order, first the lowest price, and then in ascending order (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, taking into account the selected quantity, is displayed above the buy button.
For posting feedback, styles from the comment component are used, which are configured in the Builder YooTheme Pro. For withdrawal, the client's avatar will 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 rating display in JoomShopping settings, rating stars will be displayed at the top of the page, and have a smooth scrolling link to the reviews section.
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 crawler 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 methods listed above allow you to ensure and / or accelerate the output 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 accurate and informative product descriptions.
The shopping cart in the Techno template for JoomShopping is also responsive, so the buyer can view its contents 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 mostly these are flaws in the interface of the order page, which make shopping through the cart inconvenient, 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 that guide the visitor to complete the online purchase. However, we recommend that you reduce the number of registration fields and the number of steps to a minimum.
If you need professional help to install a template on your site, we will be happy to provide you with it.
No reviews yet. Be the first to leave it.
Write a comment for this product!
TECHNO 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.