SJ Categories Accordion for HikaShop - Joomla Extension
SJ Categories Accordion for HikaShop is a module based on the best features for demonstrating the product, supports the HikaShop component, Joomla 4.x and Joomla 5.x.

Extension Description
At a glance you can see the name of the main category, subcategories and items: miniatures, name, rating, price, creation date and brief description. In addition, you can decide which one you want to display or hide. Thanks to its flexible layout, this module can fit all the screen sizes of the device. You can either display the price details, add to the shopping cart, or add to the wish list sites for selling items and other types of web pages.
- Adaptive Layout Support
- Fully compatible with IE8 +, Firefox 2+, Flock 0.7+, Netscape, Safari, Opera 9.5, Chrome.
- Supports 3 layouts. Below you can see the screenshots.
- Support for two types of tabs: hover over the mouse or click
- Support for multiple modules on one page
- Multi-language support
- Support for changing the name of the module
- Allows you to read data from any category
- Allows you to set the number of columns and rows by category.
- Allows you to set the order of categories by name / created date / random
- Allows displaying / hiding the title, descriptions, category images
- Allows you to get a category icon from an image category, category description and folder extension
- Allows you to display or hide: Name, Description, Photo, Price, Hits, Voices, Add to Cart / Add to wish list of each product
- Allows you to receive images from a product image, description, folder extension
- Allows you to change the width / height / background colors / resize large and small images
- Support link in image and title
- Support for opening links in: the current window, a new window or a pop-up window
- Slide / fade support, auto play, pause when hovering and scrolling
- Support for many modes for resizing a product / category: Center, Fill, Stretch, Fit, No
- Mouse wheel effect support
- Caching support to speed up the loading of your site.
Specifications:
| Release date: | 29-05-2014 | |
| Last updated: | 03-07-2024 | |
| Type: | Paid | |
| License: | GPL | |
| Subject: | Specific for HikaShop | |
| Compatibility: | J3.x J4.x J5.x | |
| Includes: | Module | |
| Language packs: |
|
|
| Developer: | SmartAddons | |
| Rating: | ||
Share with your friends!
Guide to Setting Up SJ Categories Accordion for HikaShop for a Joomla Store
SJ Categories Accordion for HikaShop is not there to decorate a page. Its purpose is to make HikaShop catalog navigation clearer and easier to use. In this guide, we will cover how to prepare your category tree, publish the module in the right Joomla position, connect it to menu items, verify the result on the live site, and quickly find the cause if the accordion does not expand or shows the wrong sections.
This article is written for store owners, Joomla administrators, and webmasters who already work with HikaShop or are moving a catalog from a basic category list into a more compact sidebar block. We will not repeat the extension's marketing copy. Instead, we will follow a practical path: from checking your source data to safe configuration, troubleshooting, and deciding whether the module belongs in your production template.
Because the developer's original page does not currently provide a complete set of technical details, any exact module parameters that may be debatable are described cautiously. Everything related to HikaShop, Joomla modules, positions, menu items, CSS, and common conflicts is based on HikaShop and Joomla documentation. If some field names in your version of SJ Categories Accordion for HikaShop are different, follow the configuration logic rather than looking for a word-for-word match for every option.
What problem a category accordion solves in a HikaShop store
In HikaShop, categories can be more than just a technical way to group products. For shoppers, they are often the main way to understand the catalog: where to find shoes, accessories, consumables, or seasonal bundles. A standard menu item with a category listing works well as a standalone catalog page, but it does not always help someone who is already viewing a product or section and wants to jump quickly to a neighboring branch. That is where an accordion module becomes useful.
A category accordion compresses a multi-level structure into a compact navigation block. Parent categories stay visible, child categories expand based on user interaction or the current page state, and the sidebar does not turn into a long scrolling list. For a store with several nested levels, this is more practical than showing every section at once.
Based on the product name, SJ Categories Accordion for HikaShop is specifically built for the Joomla + HikaShop stack: the module is expected to use store categories and display them in accordion format. That means configuration should focus not only on appearance, but also on the three systems working together:
- HikaShop categories define the source tree, ordering, names, images, and hierarchy.
- The Joomla menu defines pages, URLs, active items, and the context in which a shopper opens a catalog section.
- The Joomla module system controls position, publication, page assignment, access level, and caching.
If you configure only the module but leave the category tree messy, the navigation will be just as messy. If you prepare the categories but publish the module in the wrong position, users will not benefit from it. If you ignore menu assignment, the block may appear where it gets in the way, or disappear where it is actually needed.
Where this kind of module is genuinely useful
The best fit for SJ Categories Accordion for HikaShop is a catalog with stable sections and clear hierarchy. For example, a parts store might group products by equipment type, then by manufacturer, then by subsystem. A clothing store might expand "Women's Clothing," "Men's Clothing," and "Shoes" to reveal more specific product types underneath. In that kind of structure, the accordion helps users move through the catalog without memorizing everything or returning to the main category page after every click.
The module is also useful on pages with long product lists. Once a shopper scrolls past the first screen, the top menu is no longer helping, but sidebar or lower-page navigation remains close to the content. For a small store with five categories, an accordion may be unnecessary. For a catalog with multiple branches, though, it reduces unnecessary navigation steps.
How the module differs from a regular category menu
In Joomla, a menu item creates a page and a URL. A module displays a block inside an existing page. HikaShop documentation treats menus and modules as separate concepts: menus lead to content, while a module is published in a template position and can contain its own links. That distinction matters here. The accordion does not replace the main catalog pages. It adds a navigation layer on top of them.
The practical rule is simple: keep the main section pages as menu items or HikaShop listings, and use the accordion as a guide between them. That way, the store keeps a clean URL structure, and shoppers get fast access to neighboring categories.
Who this module is a good fit for, and when another approach makes more sense
SJ Categories Accordion for HikaShop is worth considering if the site already uses HikaShop as the store foundation and categories actually help users choose products. The module does not solve attribute-based filtering, does not replace search, and does not turn a flat catalog into a well-designed structure. What it does is expose an existing hierarchy and make it easier to use on the front end.
It is a good fit for the following types of projects:
- Stores with a sidebar or a dedicated catalog navigation area.
- Catalogs with two or three category levels, where a full list takes up too much space.
- Sites where shoppers often move between neighboring sections instead of landing directly on product pages from search.
- Joomla projects where the administrator wants to control block visibility through standard module positions and menu assignment.
- Stores that need to present the HikaShop structure cleanly without a heavy page builder.
There are also situations where an accordion is not the best solution. If the catalog is built around filters such as sizes, colors, brands, price ranges, or technical specs, categories may be too coarse a tool. In that case, users will find products faster through HikaShop filters or a dedicated search module. If the catalog has only one level and very few sections, a standard menu will be simpler. If the template does not have a suitable position for a sidebar block, you may need to solve the layout first and add the module afterward.
Before installation, define a concrete goal rather than saying "I want a nice-looking accordion": which categories should the shopper be able to expand, on which pages the block is helpful, which sections should stay out of navigation, and what the active category should look like.
What to check before installation: categories, menus, positions, and access
Preparation takes less time than troubleshooting later. SJ Categories Accordion for HikaShop depends on HikaShop data and standard Joomla module logic, so your first checks should happen around the extension, not inside it.
Review the HikaShop category tree
Open the store categories and look at them from the shopper's perspective. In HikaShop, categories can have descriptions, images, metadata, and hierarchy. For an accordion, the most important pieces are the name, order, and parent relationship. If categories in the admin area use abbreviations, internal codes, or duplicate names, the module will faithfully display that same mess on the site.
Minimum category tree checklist:
- Make sure every category has a clear public-facing name.
- Check that child categories are placed under the correct parent.
- Disable or exclude sections that exist only for internal grouping.
- Choose an order that reflects the shopper's path, not the order in which categories were created.
- Make sure target categories contain products, or at least show a clear message when a section is empty.
If the structure is not ready yet, do not start with module design. Fix the categories first. The accordion should not hide catalog problems. It should make an already clear structure faster to use.
Prepare a menu item for the main catalog
HikaShop documentation shows that store content can be displayed through both menu items and modules. For an accordion, it is important that categories live in a consistent page context. Create or verify the main catalog menu item, for example "Catalog," "Shop," or a specific section. This helps Joomla detect the active item correctly and gives users a reliable way back to the overall structure.
If each module link leads to a category without a clear associated menu context, you may end up with unexpected URLs, a different set of modules on the page, or the wrong template style. On a production site, it is better to keep a predictable setup: one main catalog menu item, with the accordion acting as navigation inside that area.
Find the right module position
A Joomla module becomes visible only after it is published in a template position and assigned to pages. Before installation, open the list of positions in your template. You need an area where vertical navigation will not break the product layout, compete with the cart, or drop below the main content on mobile devices.
For an accordion, suitable positions are often a sidebar, an area above the product listing, lower catalog navigation, or a dedicated panel in the template. Position names depend on the specific template, so do not assume there will always be a universal sidebar. Check how the position actually behaves in your layout.
Check access rights and languages
If the store is multilingual, decide up front whether one module should serve all languages or whether you need separate instances. HikaShop supports language files and translated content, and Joomla lets you assign modules by language and access level. For a simple setup, one published module with public access may be enough. For a more complex store, it is better to create separate modules for each language version and avoid mixing different category trees in the same block.
Installing the module and running the first check in Joomla
Installing a Joomla extension is usually done through the installer. HikaShop documentation describes component installation as a package upload, and Joomla modules are configured through the site module list after installation. The logic for SJ Categories Accordion for HikaShop is similar: install the package, locate the module, publish it, choose a position, assign pages, and verify the front end.
Do not unpack the archive manually unless you have a specific reason. If the package is meant to be installed through the admin panel, use the standard Joomla installation workflow. Manual file upload is only appropriate in limited cases when normal installation fails because of server restrictions, directory permissions, or upload size limits. Those situations are better handled with your hosting provider and a backup, not by improvising file replacement.
Basic action sequence
- Create a backup of the site and database, especially if the store is already accepting orders.
- Confirm that HikaShop is installed, opens correctly in the admin panel, and already contains store categories.
- Install the SJ Categories Accordion for HikaShop package through the standard Joomla installer.
- Open the site modules section under
ContentorSystem, depending on your Joomla interface version, and find the new module by name or type. - Open the module, set a title, choose a template position, and temporarily assign it only to a test catalog menu item.
- Publish the module, save the settings, and open the public-facing site as a regular user.
The first check is best done on a limited set of pages. If you assign the module to the entire site right away, it becomes harder to tell whether a problem comes from the position, the menu, the template, HikaShop data, or a conflict with another JavaScript component. A test menu item gives you a controlled environment.
What you should see after the first save
After publishing, you should see either the module title or the category list itself in the selected position. If the tree is large, do not try to perfect the visual design at the first step. First confirm that the module is pulling HikaShop categories and that the links point to the correct sections. Only then should you move on to depth, expansion behavior, styling, and interaction.
A minimal successful result looks like this:
- The module appears only on the pages where it is assigned.
- The block shows the expected categories rather than an empty list.
- Clicking a category opens a HikaShop page, not an error or an unrelated component.
- The template does not break the block width, buttons, or spacing.
- After disabling the module, the page returns to its previous state without leftover layout artifacts.
Do not enable the module across the whole site immediately. First test one catalog page, then a product page, then a few nested categories. That makes it much easier to find conflicts and roll back safely.
Detailed SJ Categories Accordion for HikaShop configuration after installation
The main accordion setup is not a single toggle. It is a chain of decisions: which tree root to show, how deeply categories should expand, how the active branch is determined, where the module should appear, which pages it should be assigned to, and how to keep the block readable. Below is a practical configuration logic you can apply even if some field names in your version of the module are different.
Title, publication, and position
Start with the standard Joomla fields. The title should tell shoppers what they are looking at: "Categories," "Shop Sections," or "Browse by Section." If the template already renders a position title, you can hide the module title, but do not do that automatically. On product pages, shoppers often need explicit context.
Choose the position based on the use case. For sidebar navigation, a column next to the listing or the product page usually works well. On mobile layouts, a position above the product list or below the short category description may work better. If the template pushes the sidebar too far down, the accordion can become nearly invisible on a phone. In that case, check the template settings or choose a different position.
Choosing the root category and depth
If the module allows you to choose a main category, do not display the entire store tree unless you actually need to. For a large catalog, it is better to create multiple instances: one for the overall catalog, another for a specific section, and a third for a special showcase area. That reduces noise and helps shoppers see only the relevant branches.
Expansion depth depends on the structure. Two levels are usually easy to read: a parent category and its child sections. A third level is acceptable if names are short and the position is wide enough. A fourth level in a sidebar often turns into a cramped staircase. If your catalog really needs that much depth, consider a dedicated category page, filters, or search.
| Catalog structure | Recommended approach | What to check |
|---|---|---|
| Up to 10 categories with no nesting | An accordion may be unnecessary. A regular menu or list is often enough. | Make sure the module is not overcomplicating the choice or taking up too much space. |
| 2 levels: section and subsection | The ideal use case for a sidebar accordion. | Check whether the active parent expands and whether child categories are visible. |
| 3 levels or more | Show a limited branch or use separate module instances. | Check for overly deep indentation and whether the current section remains easy to identify. |
Category order and the active branch
HikaShop lets you control item order in listings, and its display settings can include direct children or all nested items. In an accordion, the order should match business logic: key sections first, seasonal groups nearby, internal categories hidden. If the module inherits order from HikaShop, configure it there. If the module has its own sort field, choose an option that does not conflict with the catalog order.
Check the active branch separately. When a user is inside the "Boots" category, it helps if the parent category "Shoes" is already expanded and the current item is visually distinct. If the module cannot expand the active branch automatically, compensate with the category page, breadcrumbs, and clear headings. Do not assume shoppers will simply figure out where they are.
Page assignment
In Joomla, a module can be shown on all pages, only selected pages, or all pages except selected ones. For a store, the targeted option is usually best: the main shop page, category listings, product pages, and possibly brand or curated collection pages. On checkout, account, shipping, or payment information pages, the accordion is often unnecessary. It distracts from completing the task at hand.
A solid starting set looks like this:
- Show the module on the main catalog page and category pages.
- Show the module on product pages if sidebar navigation does not interfere with purchasing.
- Do not show the module on the cart and checkout page if it distracts from the primary action.
- Do not show the module on internal service pages where categories do not help the user.
Expansion behavior and interface speed
The accordion should feel fast and predictable. If you can choose between expanding on click and expanding on hover, click is usually the safer option for a store. Hover works poorly on touch devices and can be annoying when the menu expands because of accidental cursor movement. If animation is available, choose a moderate speed. Long effects may look attractive in a demo, but they slow shoppers down during real browsing.
After changing the behavior, open the site with a cleared browser cache and test several actions in a row: expand a parent, open a child category, go back, open a product page, then expand a neighboring branch again. If the module behaves inconsistently at any step, do not move on to design until the mechanics are stable.
Appearance without fragile template rework
The safest approach is to use built-in module settings, HikaShop CSS, and the template's CSS file without editing the extension files themselves. HikaShop documentation shows that custom CSS changes can be added through the display configuration interface. That works especially well for an accordion: you can adjust spacing, the active item, link width, and contrast without touching PHP code.
Do not begin with a major redesign. Start with readability: large enough text, sensible spacing, a clearly visible active state, and no layout jumps during expansion. After that, you can add subtle borders, an active-category background, or compact arrow indicators.
How to connect the category tree, menu items, and SEO logic
A category accordion affects more than convenience. It changes a store's internal navigation, which indirectly influences which pages get more visits, how users perceive the structure, and where duplicates can appear. That is why SJ Categories Accordion for HikaShop is best configured alongside your menu map rather than in isolation.
One primary path to each category
In HikaShop, the same category can be accessible through different display contexts. That is normal for a flexible CMS, but it is bad for navigation if users keep landing on pages with different sets of modules. Try to ensure that every important branch has a predictable path: main catalog menu item, category, nested category. That way, the accordion links will not feel random.
If you create separate menu items for large sections, check how the module behaves on each one. In some cases, it makes sense to create different accordion instances for different sections: on the "Shoes" page, show only the footwear branch; on the "Accessories" page, show only accessories. This reduces the number of links and keeps navigation closer to the current context.
Do not turn the accordion into a map of the entire site
A common mistake is to dump the whole store into a single block: categories, subcategories, brands, internal groups, seasonal collections, and archives. Formally, that gives you lots of links, but in practice it makes choosing harder. For users, a short structure that shows the current branch and a few nearby directions is far more helpful.
If you want to expose more entry points, split the jobs:
- The accordion is for category hierarchy.
- The HikaShop filter is for attributes, brands, prices, and product parameters.
- A separate recommendations block is for sales, popular products, and seasonal collections.
- The main Joomla menu is for the top level of the site and service pages.
That way, each navigation element has a clear role. The accordion should not compete with filters or search.
Checking indexation and duplicates
The module itself does not guarantee SEO results and should not be treated as a ranking tool. Its job is to make categories easier to reach. After setup, verify that the links point to the correct canonical pages, category headings are not duplicated for no reason, and internal-only categories do not appear in public navigation. If HikaShop or the template uses different layouts for the same section, it is better to normalize the menu structure into a single clear pattern.
Practical check: open three categories from the accordion, copy their URLs, and compare them with the URLs of those same categories from the main menu. If the routes differ for no good reason, fix the menu items before publishing the module across the entire store.
Where to place the accordion: category page, product page, and mobile layout
The same module can help in one place and get in the way in another. That is why the placement of SJ Categories Accordion for HikaShop should be designed not as a purely technical position choice, but as part of the shopping journey. A user on a category page, a user on a product page, and a user on checkout are in different states. They do not always need the same navigation.
On a category page, the accordion helps users widen or narrow their choice. They are already viewing a section, but may want to jump to a neighboring subsection. In that location, the block should be noticeable enough to be useful without stealing attention from the products. If the category page begins with a description, an image, and filters, the accordion is usually best placed next to the main listing or before a long product list so it does not end up at the bottom of the page.
On a product page, the goal is different. The shopper is already considering a specific product, and extra navigation may pull them away from the purchase. An accordion on a product page is useful when shoppers often compare items across neighboring sections. For example, someone looking at one shoe model may want to jump quickly to a related category. If the product page is already crowded with a gallery, specs, variants, and shipping blocks, it is better to keep the module only on category pages.
On the cart and checkout page, the accordion usually is not needed. Once a user reaches the final step, the site's job is not to suggest a new branch of the catalog, but to help complete the action. There can be exceptions, but those should be validated through testing, not by habitually showing the same sidebar everywhere. If sidebar navigation weakens focus on the checkout page, disable the module for those menu items.
Different instances instead of one universal block
Joomla allows you to create multiple instances of the same module type. For a HikaShop store, that is often better than one oversized accordion. For example, a general instance can show all top-level sections on the main catalog page, while inside the "Kitchen" section, a separate instance shows only kitchen-related subcategories. Shoppers see fewer links, but each one is more relevant to the task at hand.
This approach requires careful menu assignment. Give modules clear names in the admin panel: "Categories - Main Catalog," "Categories - Kitchen," "Categories - Lighting." These are internal admin names and do not need to match the public title. A few months later, you will understand much faster which instance controls which section.
Mobile version: when the sidebar stops being a sidebar
On desktop, the accordion often lives in the left or right column. On mobile widths, that column may move below the products or below the description. Formally, the module is still published, but in practice users may never reach it. That is why mobile testing should be part of configuration, not a final glance just to be safe.
If the module ends up too low on a phone, there are several safe options:
- Move it to a position above the product listing if the template supports that area.
- Create a separate mobile instance with a shallower tree and assign it to the same pages.
- Keep the accordion for desktop navigation only, and strengthen breadcrumbs, filters, and the main catalog link on mobile.
- Shorten public category names if they wrap across multiple lines and break the item height.
Do not turn the accordion into a slide-out panel through random JavaScript if the module does not support that mode natively. In a store, stable links and predictable behavior matter more than flashy menu effects. If you need a more complex mobile pattern, it is better to implement it at the template level or use a dedicated menu module.
How to tell whether the placement is right
Run a short test using three tasks. First: a user lands on the "Kitchen" page and needs to open "Cookware." Second: a user is viewing a product in "Cookware" and wants to move to the neighboring "Storage" category. Third: a user has added a product to the cart and should complete checkout without distraction. If the accordion helps with the first two tasks and does not interfere with the third, the placement is probably right.
If the block is noticeable only to an administrator who already knows where to look, that is a bad sign. If the block is too large and constantly competes with the products, that is also a problem. Look for balance: the accordion should be a clear support tool, not the star of the page.
Practical example: sidebar navigation for a catalog with nested sections
Let us walk through a scenario that fits SJ Categories Accordion for HikaShop well: a store selling home goods. The catalog contains sections such as "Kitchen," "Bathroom," "Storage," and "Lighting." Each section has child categories. The goal is to show a compact accordion in the sidebar on catalog pages and product pages, but not on the cart page.
Goal
Shoppers should be able to see the main store sections, expand child categories, and move between neighboring branches without returning to the main catalog page. The administrator should manage the block through the standard Joomla module manager without editing extension files.
Preparation
Before configuration, make sure the HikaShop categories are already created and properly ordered. Each major section should include child categories, and empty or internal-only branches are better hidden. You also need a main catalog menu item that leads to a HikaShop category or product listing.
Configuration steps
- Open the site module manager and create or edit an instance of SJ Categories Accordion for HikaShop.
- Name the module "Shop Sections" and choose the template's sidebar position.
- In the source settings, choose the root catalog category if that field is available in your version.
- Limit the depth to two or three levels so the block does not become too long.
- Enable expansion of the active branch if the module offers that option.
- Assign the module to the catalog menu item, category pages, and product pages.
- Exclude the cart and checkout page if they live under a separate menu item.
- Save the settings and check the public-facing site.
Expected result
On the "Kitchen" category page, the shopper sees a sidebar block called "Shop Sections." The parent category "Kitchen" is expanded or easy to expand with a click. Child sections are displayed compactly. When the user navigates to "Cookware," the page opens without errors, the current branch remains clear, and the other top-level sections do not take up too much space.
A common issue that gets in the way
If the module is assigned to the wrong menu item, it may disappear after a category click. Visually, that can look like the link is "breaking" the accordion. In reality, Joomla is opening the page in a different context where the module is not assigned. Check not only the module itself, but also the menu item through which the category is opened.
Verifying the result: what to inspect on the public-facing site
After configuration, it is important to test more than a single click. The module can look correct on the main catalog page and break on a product page, at mobile width, or after caching is enabled. Your check should include appearance, links, active state, speed, and behavior after page reloads.
Checking links and the current branch
Open the catalog page, then several child categories, then a product page. At each step, ask yourself four questions:
- Is it clear where the user is inside the catalog?
- Do accordion links lead to the expected HikaShop categories?
- Does the module remain visible after entering a child category?
- Are any internal or empty categories appearing that should not be public?
If the active branch is not highlighted, that is not always critical, but in that case breadcrumbs, the category heading, and a logical list structure become even more important. If the module is showing the wrong categories, go back to the root category, depth, and nesting filter settings.
Checking different screen widths
The accordion is often placed in a sidebar, and sidebars on mobile devices may drop below the main content. Open the page at a narrow width and see whether the navigation ends up below all the products. If it does, consider a different position, a separate mobile module instance, or a more visible catalog link.
Also check whether items can be expanded comfortably with a finger, whether the clickable area is tall enough, and whether arrow indicators overlap the text. In a touch interface, slightly taller but usable items are better than smaller, cramped controls.
Cache, speed, and repeat testing
If the site uses Joomla cache, template cache, or a script optimizer, clear the cache after configuration and repeat your checks. For navigation modules, it is especially important that the active state does not get stuck from the previous page. If everything works after clearing cache but fails with cache enabled, review the module's caching parameters and JavaScript optimization settings.
Do not tell yourself that "users probably will not notice." Category navigation is one of the first elements a shopper interacts with. If expansion works only intermittently, trust in the store drops faster than it would from a minor visual imperfection.
Safe appearance improvements without editing extension files
For small design tweaks, CSS is the best tool. HikaShop documentation shows that CSS can be edited through the display interface, and a Joomla template usually provides its own place for custom styles. Do not edit module files directly: updates can wipe out your changes, and mistakes are harder to roll back.
Below is a cautious CSS example that does not depend on the module's internal PHP. Before using it, open your browser's developer tools and confirm the real container classes. If your module uses a different class, replace the selector with the actual one. The goal of the example is to improve accordion readability, not to impose a one-size-fits-all design.
/* Improve readability for the HikaShop category accordion.
Add this to the template's custom CSS or the HikaShop CSS section
after confirming the actual module container class. */
.sj-categories-accordion,
.sj-categories-accordion ul {
margin: 0;
padding: 0;
list-style: none;
}
.sj-categories-accordion a {
display: block;
padding: 0.55rem 0.75rem;
line-height: 1.35;
text-decoration: none;
}
.sj-categories-accordion .active > a,
.sj-categories-accordion a:focus,
.sj-categories-accordion a:hover {
background: rgba(38, 132, 255, 0.12);
text-decoration: none;
}
.sj-categories-accordion ul ul a {
padding-left: 1.35rem;
font-size: 0.95em;
}
The post-CSS check is the same as after module configuration: open a category page, expand several branches, navigate to a child section, and test at mobile width. If the style does not apply, do not add !important immediately. First make sure the selector matches the actual markup. If the layout breaks after the change, remove the CSS block you added and clear cache.
Safe rule: adjust appearance through CSS and settings, and control accordion behavior through module parameters. Do not modify the extension's JavaScript or PHP without developer documentation and a backup.
Why the category accordion is not working and how to find the cause
Problems with SJ Categories Accordion for HikaShop usually happen at the intersection of three areas: HikaShop data, Joomla module assignment, and template front-end scripts. Do not rush to reinstall the extension. First identify the symptom and check the most likely layer.
The module is not visible on the page
Symptom: the module is published, but it does not appear on the public-facing site. Possible causes include the wrong template position, the module not being assigned to the current menu item, an access level that does not match the user, or cached output showing an older version of the page.
Check the position, temporarily enable the module title for diagnostics, assign the module to a single test menu item, and clear cache. If the block appears after that, restore settings one at a time. If it still does not appear, verify that the selected position actually exists in the current template.
Categories are not displaying or the list is empty
Symptom: the module area is visible, but there are no categories inside it. Check whether published HikaShop categories exist, whether an empty root section is selected, and whether the depth is restricted so heavily that child items are excluded from output. If the store uses multiple languages, confirm that the categories are available in the current language.
Start the fix in HikaShop: open the categories, verify publication and nesting, then return to the module and temporarily choose a broader root or remove unnecessary depth restrictions if that option exists.
Clicking a category goes to the wrong place or the module disappears after navigation
Symptom: the first page looks correct, but after clicking a category, a different layout opens or the block disappears. Most often, the cause is menu item assignment. Joomla shows modules according to assignment rules, and the new page may fall outside the selected set.
Check which menu item becomes active after navigation. If categories open in the context of a different menu, assign the module there as well or configure a single catalog entry point. Do not assign the module to every page just for a quick fix if it is not needed on the cart and service pages.
The accordion does not expand or expands with glitches
Symptom: the list is visible, but child branches do not open, open with a delay, or conflict with other elements. A likely cause is a JavaScript conflict with the template, an optimizer, an older menu module, or a plugin that changes script load order. HikaShop documentation discusses JavaScript compatibility issues separately and recommends identifying the source through the browser console and by disabling conflicting extensions.
Open the browser console, refresh the page, and look for script errors. Then temporarily disable JavaScript bundling or minification in the optimizer if one is installed. If the problem disappears, create an exception for the module scripts or leave optimization disabled on catalog pages.
Styles look broken after a template change
Symptom: after updating or switching the template, the accordion loses its spacing, arrows, active state, or width. The likely cause is that the template overrides general list and link styles. Inspect the markup with developer tools and add targeted CSS in the template's custom stylesheet.
It makes sense to roll back the module setup if CSS fixes become too complex or start conflicting with other blocks. In that case, it is better to choose a different position, simplify the tree depth, or discuss a template override with the site developer.
FAQ for setting up SJ Categories Accordion for HikaShop
Can the module be used without HikaShop?
The product is intended for HikaShop categories, so without HikaShop installed and configured, it has little practical value. If you just need a standard accordion for Joomla articles, it is better to choose a Joomla menu or category module that does not depend on the store component.
Do I need a separate menu item for every category?
Not always. What matters is that the store has a clear main menu context and that links open predictably. Separate menu items can be useful for major sections, but creating one for every minor category only makes sense when you need it for layout, SEO structure, or a different set of modules.
Why is the module visible to the administrator but not to a regular visitor?
Check the module access level and category access, publication state, menu assignment, and language. Also open the site in a private browser window without logging in. If the module is available only to registered users, public visitors will not see it.
Can I show different accordions in different store sections?
Yes, and that is often more convenient than using one massive list. Create multiple instances of the module, choose a separate category root or output settings for each one, and assign them to the appropriate menu items. Just make sure the instances do not overlap on the same page.
Does a category accordion affect site speed?
Any module adds markup, styles, and sometimes scripts. With a small tree, the impact is usually moderate, but a large number of categories, deep nesting, animations, and conflicting optimizers can slow down the interface. After configuration, test the catalog page with cleared cache and while logged out.
Which is better: categories, filters, or search?
They serve different navigation roles. Categories work best for a clear product hierarchy. Filters are for product attributes. Search helps users who already know the name or model. A strong store often uses all three, but does not combine them into one overloaded block.
Is it worth editing the module files for design changes?
No, not if you are only changing colors, spacing, text size, or the active state. Those adjustments are better handled through the template's custom CSS or the HikaShop CSS interface. Extension files should only be changed as part of deliberate development work, with a backup and a clear update strategy.
When SJ Categories Accordion for HikaShop is the right choice
SJ Categories Accordion for HikaShop is worth using when the store has a clear category tree and shoppers need to move quickly between sections without relying on a long catalog page. The module's strength is compact navigation tied to Joomla positions and the HikaShop structure. Its weakness is that it depends heavily on the quality of the underlying categories, the template, the menu items, and front-end scripts.
Before publishing it on a live site, verify four things: the HikaShop categories are organized, the catalog menu item is stable, the module is assigned only to the pages where it belongs, and the accordion expands without JavaScript errors. If those conditions are met, you can download the SJ Categories Accordion for HikaShop archive, install it on a test copy of the site, and walk through the shopper journey from the catalog to the product page.
If the catalog is small, if navigation is driven mainly by filters, or if the template does not provide a suitable position, do not force the accordion to solve the wrong problem. In that case, a regular menu, the built-in HikaShop module, or a filter may be the better choice. A good result does not come from installing an extension by itself. It comes from fitting the module into the actual logic of the store.
Nearby Materials | ||||
|
ZL ZOOmailing - Joomla Extension | Google One Tap - Joomla Extension |
|
|


