Skip to main content

Custom Accordions

The Custom Accordions app enhances your J2Commerce product pages by allowing you to add fully customizable accordion-style tabs directly to any product listing. Instead of overwhelming customers with long blocks of text, you can organize product details — such as specifications, sizing guides, shipping information, FAQs, or warranty details — into clean, collapsible sections that users can expand on demand.

Requirements​

  • with PHP 8.3.0 +
  • Joomla! 6.x
  • J2Commerce 6.x

Purchase and Download​

Step 1: Go to our J2Commerce website -> Apps

Step 2: Locate the Custom Accordions App -> click View Details -> Add to cart -> Checkout.

Step 3: Go to your My Downloads under your profile button at the top right corner and search for the app. Click Available Versions -> View Files -> Download Now

Install the App​

You can install this Custom Accordions App using the Joomla installer. The following steps help you with a successful installation.

In the Joomla admin, go to System -> Install -> Extensions

Upload the plugin ZIP file or use the Install from URL option.

Install extensions

Enable the App​

Once you have installed the App, you will need to enable it. There are two ways you can access the extension.

Option A: Go to the J2Commerce icon at the top right corner -> Apps

Option B: Go to Components on the left sidebar -> J2Commerce -> Apps

shipping method

Look for Custom Accordions, click the X, and it will turn into a green checkmark. It is now enabled and ready for setup.

Configure the App​

Once you click on the Custom Accordions Title next to the green checkmark, you are ready to start setting up the parameters.

tip

Click the Toggle Inline Help button in the toolbar and the app will show a description below each field as you configure it.

Basic Settings tab​

Prepare Content​

Prepare the content with the Joomla Content Plugins

Enable Prepare Content when your accordion content contains:

  • Joomla content plugins (e.g., {loadmodule}, {loadposition})

  • Third-party plugin syntax (e.g., gallery sliders, video embeds)

  • Shortcodes that require content plugin processing

info

NOTE: This option applies processing overhead. Leave disabled for simple HTML content.

Custom Field Short Code​

Render the custom fields in the accordion content

Enable Custom Field Short Code when:

  • You have created J2Commerce custom fields for products (e.g., material, weight, dimensions)

  • You want to display these custom field values inside the accordion content

  • You use custom field shortcodes in your accordion descriptions

Leave disabled for standard HTML content without custom field references.

Display Brand Details ​

Select 'Yes' to display the product's Manufacturer / Brand details in a separate accordion tab. Depending on your country, this may be a mandatory requirement.

info

NOTE: In order to add the Brand or Manufacturer to a product, you have to add them to the database.

Go to J2Commerce -> Dashboard -> Catalog -> Manufacturer or Components -> J2Commerce -> Dashboard -> Catalog -> Manufacturer. Fill out the company information and hit save

When enabled, J2Commerce retrieves manufacturer details from the product's assigned manufacturer:

  1. Company Name: The manufacturer's name appears as the accordion title

  2. Brand Description Article: The Manufacturer description content loads from the linked Joomla article (create an article with a description/bio for the manufacturer). If you don't attach an article, then it won't show up on the frontend

Position Options​

This only shows up when the Display Brand Details is enabled.

Before: The brand accordion appears as the first accordion on the product page

After: The brand accordion appears as the last accordion on the product page

Adding a Manufacturer to the Products​

There are three ways you can access the products.

Option A: Go to the J2Commerce icon at the top right corner -> Catalog -> Products

Option B: Go to Components on the left sidebar -> J2Commerce -> Products

Option C: Go to Content -> Categories -> Find the category and then click inside the published/article section

Open the product -> J2Commerce tab -> General tab -> Brand or Manufacturer -> Select the Manufacturer Article

Frontend View​

Adding an Accordion to the Products​

After enabling the plugin, each product can have custom accordions.

Edit a Product​

There are three ways you can access the products.

Option A: Go to the J2Commerce icon at the top right corner -> Catalog -> Products

Option B: Go to Components on the left sidebar -> J2Commerce -> Products

Option C: Go to Content -> Categories -> Find the category and then click inside the published/article section

Click on a product to edit it -> J2Commerce tab -> Apps tab

Click the Custom Accordion dropdown menu -> Click Select to Add Accordion from Article

Add Accordion from Article​

The Add Accordion from Article field lets you import content from a Joomla article.

info

NOTE: This is a great tool if you want to display a specific article on the individual product pages. ie, Return Policy, Allergy Disclosure, etc.

Add Accordion from Article: Select an existing Joomla article. The article title becomes the accordion title, and the article content becomes the accordion body.

Adding Additional Custom Accordions​

Click the Add Custom Accordion button to create unlimited custom accordions.

Each accordion row has these fields

Accordion Title: The title displayed on the accordion header

Accordion Title Icon: Font Awesome icon class (e.g., fa-solid fa-star). Leave empty for no icon

Enabled: Toggle to show or hide this accordion

Accordion Content: The content displayed when the accordion is expanded. Supports HTML

Organize Accordions​

The order in which accordions appear in the admin interface determines their display order on the frontend. The first accordion appears first, followed by subsequent accordions.

Bulk Actions:

  • Collapse All - Minimize all accordion rows for easier navigation

  • Expand All - Open all accordion rows for editing

  • Delete - Click the trash icon on any row to remove it

Frontend View​

How It Works​

When a customer views a product page:

  1. J2Commerce checks if the Custom Accordions plugin is enabled.

  2. If Display Brand Details is enabled and the product has a manufacturer, a Brand accordion is added.

  3. Custom accordions defined on the product are rendered in order.

  4. If Prepare Content is enabled, content plugins process the accordion content.

  5. All accordions appear in a Bootstrap 5 accordion group (only one open at a time).

Display Conditions​

Custom accordions appear when:

  • The plugin is enabled in J2Commerce -> Apps -> Custom Accordion

  • At least one accordion is configured (article-based or custom, ie, Return Policy, Allergy Disclosure).

  • The product is published and visible.

The brand accordion appears when:

  • Display Brand Details is set to Yes in the App

info

NOTE: In order to add the Brand or Manufacturer to a product, you have to add them to the database. Go to J2Commerce -> Dashboard -> Catalog -> Manufacturer. Fill out the company information and hit save

  • The product has a manufacturer assigned: Open the product. Go to the General tab and add the Brand or Manufacturer. If it doesn't appear in the dropdown menu then it needs to be created by following the note from above.

  • The manufacturer has a description article configured.

Tips​

  • Use articles for reusable content - If the same specifications apply to multiple products, create a Joomla article and reuse it across products.

  • Keep titles concise - Long accordion titles may be cut off on mobile devices.

  • Use icons sparingly - Icons should complement, not replace, meaningful titles.

  • Test with content plugins - If using {loadmodule} or similar syntax, enable Prepare Content and verify the output.

  • Organize by importance - Place critical information (shipping, warranty) in the first accordions for visibility.

Troubleshooting​

Accordions Do Not Appear on Product Page​

Cause: The plugin is disabled, or no accordions are configured.

Solution:

  1. Go to J2Commerce -> Apps -> Custom Accordions

  2. Verify Custom Accordions shows a green checkmark (enabled).

  3. Edit the product and verify that at least one accordion is configured and enabled.

  4. Check that the accordion row has Enabled set to Yes.

Article Content Not Loading​

Cause: Invalid article ID or article unpublished.

Solution:

  1. Go to Content -> Articles -> Open the Article

  2. Verify the article exists and is published.

  3. Return to the product edit screen and reselect the article in the Accordion section of the Apps tab.

Content Plugins Not Processing​

Cause: Prepare Content is disabled.

Solution:

  1. Go to J2Commerce -> Apps -> Custom Accordions.

  2. Set Prepare Content to Yes.

  3. Clear cache: Go to Home Dashboard -> Cache -> Delete All

Brand Accordion Missing​

Cause: Product has no manufacturer assigned or the manufacturer lacks a description.

Solution:

  1. Go to J2Commerce -> Catalog -> Products.

  2. Edit the product. Go to the J2Commerce tab -> General tab -> and check the Manufacturer field has a manufacturer assigned.

  3. Verify that the Display Brand Details is set to 'Yes' in the App.

  4. Go to J2Commerce -> Catalog -> Manufacturers.

  5. Edit the manufacturer and verify that the description article is configured.

  6. Go to J2Commerce -> Setup -> Configuration -> Product Display tab -> make sure the Manufacturer / Brand is set to 'Show'

Tab Content Shows Raw HTML​

Accordion Content Shows Raw HTML​

Cause: Content contains HTML but is not being processed.

Solution:

  1. If you want HTML rendered, ensure Prepare Content is enabled.

  2. If HTML should appear as code (e.g., tutorials), leave Prepare Content disabled and escape your HTML.

Icon Not Displaying​

Cause: Invalid icon class or missing Font Awesome library.

Solution:

  1. Verify the icon class format: fa-solid fa-star or fa-regular fa-circle.

  2. Ensure your template or a plugin loads Font Awesome.

  3. Test with a known icon like fa-solid fa-check to verify the library loads.