---
title: "Custom Accordions"
description: "The Custom Accordions app enhances your J2Commerce product pages by allowing you to add fully customizable accordion-style tabs directly to any product listing."
url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/custom-accordions"
markdown_url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/custom-accordions.md"
last_updated: "2026-10-31T23:27:40+00:00"
version: "J2Commerce 6"
breadcrumbs:
  - title: "Home"
    url: "https://docs.j2commerce.com/"
  - title: "J2Commerce 6"
    url: "https://docs.j2commerce.com/v6"
  - title: "Apps and Extensions"
    url: "https://docs.j2commerce.com/v6/apps-and-extensions"
  - title: "Apps"
    url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps"
  - title: "Custom Accordions"
    url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/custom-accordions"
---

# 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](https://www.j2commerce.com/extensions) **->** **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](https://docs.j2commerce.com/images/docs/v4/assets/app%20install1%20%281%29%20%281%29.webp)

## 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](https://docs.j2commerce.com/images/docs/shared/accordions-app.webp)

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

![J2Commerce Apps list with the Custom Accordions status icon highlighted as enabled after a green "1 item(s) published" message](https://docs.j2commerce.com/images/docs/shared/accordions-enable1.webp)

## 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.

![Plugins: Custom Accordions with the Toggle Inline Help button highlighted and help text shown under Prepare Content](https://docs.j2commerce.com/images/docs/shared/accordions-toggle.webp)

### Basic Settings tab

![Custom Accordions plugin settings: Sub-Template Bootstrap 5, Prepare Content, Custom Field Short Code and Display Brand Details all Yes, Position After](https://docs.j2commerce.com/images/docs/shared/accordions-config1.webp)

### 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

![Joomla admin navigation to J2Commerce Manufacturers: Components, J2Commerce, Dashboard, then Catalog menu with Manufacturers highlighted](https://docs.j2commerce.com/images/docs/shared/accordions-manufacturer1.webp)

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

![Edit Manufacturer form with Company Name set to Cheeky Truffle Co and the Brand Description Article field highlighted under Additional Information](https://docs.j2commerce.com/images/docs/shared/accordions-manufacturer.webp)

### Position Options

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

![Plugins: Custom Accordions with Display Brand Details set to Yes and the Position Brand Accordion dropdown highlighted, currently set to After](https://docs.j2commerce.com/images/docs/shared/accordions-manufacturer2.webp)

**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

![Joomla admin navigation to J2Commerce Products: Components, J2Commerce, Products, and the Catalog menu with Products highlighted](https://docs.j2commerce.com/images/docs/shared/accordions-products.webp)

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

![Product edit, General tab highlighted: Brand or Manufacturer field highlighted with Cheeky Truffle Co selected, SKU cb-pdb, Visible in Storefront Yes](https://docs.j2commerce.com/images/docs/shared/accordions-products1.webp)

### Frontend View

![Ball Sack product page with the Cheeky Truffle Co brand accordion highlighted as the last accordion after Return Policy](https://docs.j2commerce.com/images/docs/shared/accordions-manufacturer3.webp)

## 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

![Joomla admin navigation to J2Commerce Products: Components, J2Commerce, Products, and the Catalog menu with Products highlighted](https://docs.j2commerce.com/images/docs/shared/accordions-products.webp)

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

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

![Product edit Apps tab highlighted: Custom Accordions app expanded with Add Accordion from Article and the Select button highlighted](https://docs.j2commerce.com/images/docs/shared/accordions-apps-tab.webp)

### 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.**

![Select an Article dialog listing articles with status, title, category and ID, with the first article Allergy Disclosure highlighted](https://docs.j2commerce.com/images/docs/shared/accordions-apps-tab1.webp)

**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.

![Product edit, Apps tab highlighted: Custom Accordions section with Add Custom Accordion button and an expanded Return Policy row (Accordion Title, Icon, Enabled Yes)](https://docs.j2commerce.com/images/docs/shared/accordions-apps-tab3.webp)

**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

![Ball Sack product page with Description, Specifications, Allergy Disclosure and Return Policy accordions highlighted below the Add to Cart button](https://docs.j2commerce.com/images/docs/shared/accordions-apps-tab2.webp)

## 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

![Plugins: Custom Accordions settings with Display Brand Details set to Yes (highlighted) and Position Brand Accordion set to After](https://docs.j2commerce.com/images/docs/shared/accordions-apps-tab4.webp)

> **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).

   ![J2Commerce Apps list with the Custom Accordions row highlighted showing a green enabled status checkmark, between Currency Exchange Rates Updater and Custom Tabs](https://docs.j2commerce.com/images/docs/shared/accordions-enable2.webp)
3. Edit the **product** and verify that at least one accordion is configured and enabled.

   ![Article edit, J2Commerce tab then Apps tab highlighted: Custom Accordions section with Add Accordion from Article set to Allergy Disclosure](https://docs.j2commerce.com/images/docs/shared/accordions-products3.webp)
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.

   ![Joomla Articles list with Content, Articles menu highlighted and the Published status icons highlighted for Cheeky Truffle Co, Allergy Disclosure and Return Policy](https://docs.j2commerce.com/images/docs/shared/accordions-products4.webp)
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**.

   ![Custom Accordions plugin settings with the Prepare Content switch highlighted and set to Yes, Sub-Template set to Bootstrap 5](https://docs.j2commerce.com/images/docs/shared/accordions-config2.webp)
3. Clear cache: Go to **Home Dashboard -> Cache -> Delete All**

![Joomla Home Dashboard with the Home Dashboard sidebar item highlighted and the Cache tile highlighted under System, next to Global Checkin and Global Configuration](https://docs.j2commerce.com/images/docs/shared/delete-cache.webp)

### 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.

   ![Product edit, General tab highlighted: Brand or Manufacturer field highlighted with Cheeky Truffle Co selected, SKU cb-pdb, Visible in Storefront Yes](https://docs.j2commerce.com/images/docs/shared/accordions-products1.webp)
3. Verify that the **Display Brand Details** is set to '**Yes**' in the App.

   ![Plugins: Custom Accordions with Display Brand Details set to Yes and the Position Brand Accordion dropdown highlighted, currently set to After](https://docs.j2commerce.com/images/docs/shared/accordions-manufacturer2.webp)
4. Go to **J2Commerce** **-> Catalog -> Manufacturers**.
5. Edit the manufacturer and verify that the description article is configured.

   ![Articles: Edit for Cheeky Truffle Co with Title, Content tab, article text and Status Published highlighted, in the Brand / Manufacturers category](https://docs.j2commerce.com/images/docs/shared/accordions-products5.webp)
6. Go to **J2Commerce** **-> Setup -> Configuration -> Product Display tab ->** make sure the **Manufacturer / Brand** is set to '**Show**'

   ![J2Commerce Options, Product Display tab highlighted: Catalog Mode No, Show SKU Show, and the Manufacturer / Brand switch highlighted as Show](https://docs.j2commerce.com/images/docs/shared/tabs-setup1.webp)

### 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.