Skip to content
  • Version 6.2.0

    Avant for HikaShop, first release (6.2.0). This is the Avant design from VirtueMartTemplates.net (version 5.4.10.5 there, released the same day, where it stays on sale for VirtueMart) with a complete HikaShop layer, for Joomla 6.2.0. If you run a HikaShop shop, your category pages, product pages, basket and two-column checkout now look like the Avant demo. The VirtueMart layer is still in the package, so the same template works with either cart. The package also carries the Avant improvements made since 5.4.10.4: modern icons, a show-password eye inside the password field, equal-height form fields, a 1,170 px page, a slogan that links home, a clear-out of 35 settings that did nothing, a security fix for the error page, and the menu, login, icon and phone fixes listed under Fixed.

    Added

    Shop pages in Avant’s own look

    • html/com_hikashop/product/listing_img_title.php (8,568 bytes) — the category card: HikaShop’s own item layout rearranged into the template’s .vmproduct.product-details > .spacer card markup, in the order photo, name, price. Ajax add to cart, product options, custom fields, ratings, badges, compare, contact and Schema.org data are all kept.
    • html/com_hikashop/product/listing.php (20,304 bytes) — HikaShop 6.8.1’s own listing view with two changes. On the shop’s own listing pages the category title and description print the way Avant’s VirtueMart category page does: a plain heading, with the description above the listing and a smaller heading inside it. The listing wrapper also gets the browse-view class that the template’s stylesheets already style. Product modules keep HikaShop’s original output.
    • html/com_hikashop/product/show_default.php (10,934 bytes) — the product page: HikaShop’s product page with the title moved to the top of the right-hand column, the price printed in Avant’s .spacer-buy-area .product-price .PricesalesPrice classes and a Description heading. A product’s short description shows under the title.
    • css/cart-hikashop.css (26,067 bytes) — the grid, cards, product page, option pickers, quantity row, reviews, checkout form and basket panel. Colours come from the template’s own classes and colour presets, not from hard-coded values. The last sections are the Avant card (a thin bordered card, centred name, a 16.94 px bold price and Avant’s “ADD TO CART” button with its basket picture), the phone cart panel and the checkout rules for Avant’s page grid.

    Two-column checkout

    The HikaShop checkout follows the one-page, two-column cart layout we now use in our cart templates: on a wide screen the cart and your customer’s details are on the left, and shipping, payment, coupon, terms and the Finish button sit in a column of light cards on the right. On a phone or tablet everything stacks, with the cart first.

    • html/com_hikashop/checkout/show.php (5,920 bytes) — HikaShop 6.8.1’s checkout step, with the step’s blocks printed into .cs-co-main (cart, then login or registration, then addresses) and .cs-co-side (shipping, payment, coupon, custom fields, terms, status and Finish). Every block keeps its own id, so HikaShop’s Ajax refresh of a block still works.
    • The grid is in css/cart-hikashop.css: minmax(0,1fr) 360px from 1200 px, 32 px between the columns, light cards (#f5f7fa) on the right and a full-width 48 px Finish button. Below 1200 px the two columns stack. A block that prints nothing for the current visitor (for example the address block while logged out) takes no space.
    • Avant’s checkout page hides the template’s left column (a .row:has(…#hikashop_checkout_form) rule in cart-hikashop.css) and gives the form the full width, so on a phone the cart comes first instead of 1,300 px down the page.

    HikaShop product module layouts

    Avant’s product tabs and sliders can now be HikaShop Content Modules. Pick the layout avant (HikaShop Content Module → Advanced → Layout) and the module prints products in Avant’s VirtueMart product-module markup, so the template’s own stylesheets apply. Avant’s module is a Bootstrap grid, not an Owl carousel, so this layout is written for that.

    • html/mod_hikashop/avant.php (4,739 bytes) — prints ul.vmproduct.product-details.row > li.col-md-N.productdetails > .spacer > .pr-img-handler + .action-handler. The add-to-cart button is an input.addtocart-button, the same element Avant uses for VirtueMart, so Avant’s own button colours from the template options apply. It carries a data-href with the cart address, which HikaShop’s Ajax add to cart needs. A module parameter cs_vm_layout set to single adds Avant’s paged slider (the easyPaginate script with the template’s vmtsl_* options); otherwise the module is a plain grid.
    • html/mod_hikashop/cscategories.php (4,968 bytes) — a layout for the HikaShop Content Module of type categories. It prints the shop’s categories in VirtueMart’s own category-menu markup (ul.VMmenu > li.VmOpen|VmClose > div > a + span.VmArrowdown, sub-categories in ul.menu), two levels deep, with the branch of the category being viewed open and the arrow opening and closing a branch. The parent comes from the module’s selectparentlisting option.
    • html/mod_hikashop/cs_products.php (9,046 bytes) — the shared data file the product layout includes: the product query, prices, photos, the best-matching HikaShop menu item for each product link, add-to-cart URL and option checks. It is not a layout and prints nothing by itself. Products with options show “Choose options” instead of a basket button; products without a price show no basket button.

    Header basket

    • html/mod_hikashop_cart/default.php (4,304 bytes) — Avant’s own “Shopping cart / Cart empty” label, red basket button with a count bubble and .panel2 > .cartpanel dropdown, with HikaShop’s own cart (and its Ajax refresh) inside. It keeps VirtueMart’s ids (#vmCartModule, #cartpanel) because Avant’s stylesheets style them.

    Header search through Smart Search

    The search box in the header now searches through Joomla’s Smart Search, so shoppers find HikaShop products from it.

    • html/mod_finder/default.php (1,782 bytes) — the template’s search-box markup on top of Smart Search (mod_finder). The placeholder text is the old search box’s text.
    • Why not Joomla’s old Search: that component (com_search) is not Joomla 6 native. Its router needs the Behaviour – Backward Compatibility plugin, and with that plugin off any page that prints the old mod_search stops with an error. The demo runs with the plugin off.
    • HikaShop products appear in Smart Search results through HikaShop’s Smart Search plugin, after the site has been indexed once.

    The cart stylesheet loads only when HikaShop is there

    The shop styling lives in its own file, so a site that does not use HikaShop does not load it.

    • index.php prints a <link> to css/cart-hikashop.css (with a file-time version number) only when the file exists and com_hikashop is installed and enabled. A VirtueMart-only site loads exactly what it loaded before.

    Show-password eye on every password field

    Every password field in the template (login page, header login, registration, account edit, the VirtueMart and HikaShop forms) gets an eye button that shows or hides what you typed.

    • js/cs-password-eyeball.js (7,193 bytes) — plain JavaScript, no jQuery. It wraps each input[type=password] and adds a Font Awesome eye button; a MutationObserver catches fields added later (pop-ups, Ajax forms). The password box keeps the same outer width and height as the username box in the same form. Joomla’s own show-password button is left alone where Joomla already prints one.
    • index.php loads it with a defer script tag and a file-time version number.

    Changed

    Modern icons

    • The header search button, the basket and the Home menu item’s house are now drawn with Font Awesome (a data-URI magnifier on the search button, \f07a on the basket, \f015 on the Home link) instead of small picture files, on desktop and on phones. This is the avant-std-20261103 block in css/cs-fixes.css.
    • index.php loads Font Awesome 6.5.2 and its version 4 shims from cdnjs. The old Font Awesome 5.0.1 link from use.fontawesome.com is gone.

    Login and registration forms

    • Joomla’s show-password eye sits inside the password field instead of beside it; the field takes the whole group width. On the login page the password group is 580 px wide on desktop, the same as the username field (it was 966 px). On phones the username and password fields are set to the same width and height.
    • Every field on the registration, billing-address and login forms is the same height, drop-downs included.
    • The Remember me and terms checkboxes no longer touch their label text, and on the VirtueMart login the Login button sits on its own line instead of beside “Remember me”.
    • The passkey button’s icon is sized (1.25em) and the show-password eye is drawn with a CSS mask. Avant does not load Joomla’s icon font, so before this the passkey button’s picture filled the column and the show-password button was blank (block avant-twin-20261111 at the end of cs-fixes.css).

    Page and header

    • From 1,200 px up, every Bootstrap container is limited to 1,170 px, like our other current templates. Bootstrap 5 alone would let it grow to 1,320 px at 1,400 px.
    • The header search text field is 36 px tall like its button, with the text centred. It was 20 px tall at the top of its box.

    Slogan and logo

    • The slogan under the logo links to the home page, like the logo, with the slogan’s colour and no underline. The logo link is on by default for a template style that has never been saved (logoLinked defaults to 1 in index.php).

    Slideshow default

    • templateDetails.xml: cam_turnOn (“Turn Slideshow ON/OFF”) now defaults to on, so a fresh standalone install starts with the slideshow showing.

    Phones

    • js/cs-mobile-generic.js (6 lines changed): the script that fits the cart into the phone icon row picked the first icon inside the cart. Avant’s basket button is a background picture, so the first icon it found was the delete icon inside the dropdown, and the whole dropdown was squeezed into the 42 px icon chip. It now skips icons inside .panel1, .panel2, .cartpanel, .hikashop_cart and .vm_cart_products. The cart panel opens at its full size.
    • component.php (the print and tmpl=component view) gets a viewport meta tag and body img{max-width:100%;height:auto}, so it fits a phone screen instead of rendering as a 981 px page.

    Joomla 6 clean-ups

    • html/mod_search/default.php reads the module class suffix from the module’s parameters (Joomla 4 and later no longer provide the old variable).
    • html/com_virtuemart/productdetails/default_images.php gets the template name from Factory::getApplication()->getTemplate() instead of an undefined $template object.
    • html/mod_articles_latest/default.php prints latestnews<suffix> when the module has a class suffix; a module without one looks as before.
    • html/com_virtuemart/productdetails/default.php: a leftover line for Joomla’s removed modal behaviour is gone.
    • component.php no longer links css/bootstrap.css, a file that is not in the template.
    • html/layouts/chromes/slides.php and html/layouts/chromes/vmdefault.php no longer read the Joomla 3 $attribs variable without setting it first.
    • css/responsive.css and css/template_rtl.css: the rules written for Bootstrap 2’s grid classes (span*, row-fluid) now also cover the Bootstrap 5 classes the template prints (col-md-*, row).
    • Six CSS rules that pointed at picture files that are not in the package now say none: css/camera.css (blank.gif), css/layout.css (moduletable-h-bg.png), css/presets/style-error.css (top-bg.png), css/template.css (top-small-menu-sep.gif and pdf_Button.png) and css/vm-avant.css (icon_external_link.gif). The browser no longer asks for them and gets a 404.

    Template information screen

    • templateDetails.xml names energizethemes.com as author, e-mail, address and terms link, calls the template a “Joomla Template” (it said “VirtueMart Template”), points its documentation, support, template-club and shop buttons at energizethemes.com, and uses https://energizethemes.com/updates/avant.xml as the update server. The template folder is still avant, so existing overrides and documentation still match.

    Fixed

    These were found by our rendered checks on the Avant demos and reviewed by Tim on 12 November. The CSS is the block CS-PATCH: avant-rendergate-20261112 at the end of css/cs-fixes.css.

    Menus

    • Drop-down menus fit their labels and show “&” correctly. The labels said “&amp;” because html/mod_menu/default_component.php, default_url.php and default_separator.php escaped titles Joomla had already escaped; they now pass false for double encoding. The drop-down panel is sized to its labels instead of a fixed 168 px, and a third-level list opens 4 px beside its parent instead of 8 px over it. Sub-menus no longer open on their own.

    Login

    • My Account pop-up: the Username and Password fields use the pop-up’s full width (they were 195 px in a 500 px pop-up), 34 px tall.
    • Login page: the Remember me box is centred on its text (it was 3 px high). On phones “Sign in with a passkey” and “Log in” are both full width, 46 px tall and 10 px apart.

    Icons and page numbers

    • The contact page (address, phone, fax, info), blog (category, date, hits, read-more) and Smart Search (advanced search) icons were blank, because Avant does not load Joomla’s icon font. They are now drawn with Font Awesome.
    • The active page number uses the template’s red instead of Bootstrap blue.

    Phones

    • Home page product tabs show their names (LATEST PRODUCTS, FEATURED PRODUCTS and so on) in two rows; they showed “0 1 2 3”. index.php prints the tab titles on phones too.
    • One side margin: the footer titles and text and the 404 page title line up with the rest of the page (they sat 12 to 20 px further in).
    • Tapping the share chip greys out the page below the chip row only; the grey overlay used to cover the logo and menu row too (js/cs-mobile-generic.js, scrimtop).
    • Smart Search: the Search and Advanced Search buttons are as tall as the field (38 px; they were 30 px).

    Pop-ups and links

    • component.php (pop-ups and the print view) loads css/cs-fixes.css, so pop-ups such as Ask a question get the same fixes as the pages.
    • The VirtueMart product page no longer asks for a zoom script that is not in the template (jquery.elevateZoom-3.0.8.min.js, a failed request on every product page). html/com_virtuemart/productdetails/default_images.php now asks for it only when the Zoom option is on and the file is there.

    Removed

    35 settings that did nothing (templateDetails.xml)

    • 26 slideshow options of the old camera.js engine: cam_height, cam_cols, cam_rows, cam_slicedCols, cam_slicedRows, cam_slideOn, cam_thumbnails, cam_fx, cam_fx_multiple_on, cam_fx_multi, cam_gridDifference, cam_loader, cam_barDirection, cam_barPosition, cam_piePosition, cam_loaderColor, cam_loaderBgColor, cam_loaderOpacity, cam_loaderPadding, cam_loaderStroke, cam_playPause, cam_navigationHover, cam_mobileNavHover, cam_mobileAutoAdvance, cam_opacityOnGrid and cam_portrait. The current slideshow does not read them. The slideshow settings the current slideshow does use are still there.
    • 4 drop-down menu settings: dropopacity, dropheight, dropwidth and dropspeed.
    • 1 spacer (colours_handlers) that carried a script for the old colour picker.
    • The four “Drop Down 2 to 5 columns width” settings (dropdownhandler2 to dropdownhandler5) and the four ul.columns-N width rules index.php printed for them. No template output those classes, so the settings never changed anything.
    • The template’s settings go from 211 to 176 fields.

    Security

    • Error page. When a page could not be loaded because a linked item was missing (for example a news feed id that does not exist), the error page printed a technical trace with the server’s file paths. error.php now shows the normal error page only, and an article that does not exist gets the 404 page instead of a server error.
    • The HikaShop listing layouts (listing.php and listing_img_title.php) pass the module and menu-item parameters they print (layout type, block name, page heading and similar) through htmlspecialchars() first, so a stray quote or tag in a setting cannot break out of the page markup.
    • error.php now defines the same output-cleaning helpers as index.php (phCssNum, phCssUrl, phCssFont, phCssSelector, phCssToken, phJsStr, phJsLit), each only if it is not already defined.

    Quickstart Installer

    New for Energize Themes buyers: a ready-to-install demo site with Avant already set up as a HikaShop shop. Install it on a new Joomla site and you have a working shop to edit instead of an empty one.

    What is in the Quickstart

    • Joomla 6.2.0 with HikaShop Starter 6.8.2 and the Avant template, with the demo shop. Akeeba Backup Core 10.5.0 and StageIt 6.6.4 are installed.
    • The demo shop: 37 products, 31 variants, 10 categories, 7 brands; no tax rules are set up.
    • One payment method (bank transfer) and one shipping method (Standard delivery), both published with their Joomla plugins enabled. “Force shipping” is on, so the shipping choice is always shown at checkout, including for products that have no weight.
    • Smart Search in the header instead of Joomla’s old Search, which is not Joomla 6 native and is disabled in the quickstart.
    • Akeeba Backup is set to its default backup folder, so backups work on your server straight away.
    • No VirtueMart tables, and no orders and no customers: the shop starts clean.
    • Notification address: the installer makes the new Super User the shop’s e-mail sender and notification address.
    • Checkout: the two-column layout described above.
    • Mail is switched off on the public demo only, not in the quickstart.

    Demo content

    • The sample categories that came from Joomla’s old sample data (Atomic, Beez 20, Beez 5) no longer show a broken template-thumbnail picture.
    • “Special Offers” in the top line opens the Online Store page (it was a link to # that went nowhere).

    Package format

    • Standalone template: pkg_hika-avant-6.2.0.zip — Joomla package pkg_avant, author energizethemes.com. It installs the avant template.
    • Template folder unchanged: templates/avant keeps its name, so existing template overrides, documentation and update habits still match.
    • One template, either cart: the package still carries the VirtueMart layer (html/com_virtuemart and the mod_virtuemart_* overrides) next to the HikaShop layer. The HikaShop stylesheet css/cart-hikashop.css loads only when HikaShop is installed and enabled.
    • Version: 6.2.0, for Joomla 6.2.0.

Every release of the Avant HikaShop template for Joomla, newest first.