---
title: "Custom Tabs"
description: "Do you wish to create beautiful tabbed content for your product pages? You can create any number of tabs to display in the product page."
url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/custom-tabs"
markdown_url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/custom-tabs.md"
last_updated: "2026-10-31T23:27:45+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 Tabs"
    url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/custom-tabs"
---

# Custom Tabs

Do you wish to create beautiful tabbed content for your product pages? You can create any number of tabs to display in the product page. You can enter any type of content, like features, videos, and more. You can enter the content for the tabs while creating/editing your product itself. You can create the content quickly by using the Editor.

> **Tip:** **IMPORTANT**: The app supports only J2Commerce's Product List layout and Joomla! articles that are treated as products. That is, the catalog source should be Joomla! articles.

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

Go to **System > Install -> Extensions**

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

![Custom Tabs](https://docs.j2commerce.com/images/docs/v4/assets/user-group-3%20%287%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 app.

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

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

![Enable custom tab app](https://docs.j2commerce.com/images/docs/shared/tabs-apps.webp)

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

![Joomla Apps list searched for tabs, with the Custom Tabs status icon highlighted as a green checkmark showing the app is enabled](https://docs.j2commerce.com/images/docs/shared/tabs-enable1.webp)

## Configure the App

Once you click on the **Custom Tabs** Title next to the green checkmark, you are ready to start setting up the Tabs 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.

![Custom Tabs settings with Toggle Inline Help highlighted and help text for Prepare Content, set to No, above Custom Field Short Code and Display Brand Details](https://docs.j2commerce.com/images/docs/shared/tabs-config-1.webp)

### Prepare Content

Select '**Yes**' to prepare the content with the Joomla Content Plugins

Enable **Prepare Content** when your tab 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

Select '**Yes**' to choose whether to prepare the data for the Custom tab or not.

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 tab content
- You use custom field shortcodes in your tab 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 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**. Fill out the company information and hit save

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

1. The manufacturer's name appears as the accordion title
2. Manufacturer description content loads from the linked Joomla article

### Position Options

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

**Before:** Brand accordion appears as the first accordion on the product page

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

![Storefront product page tab strip with Description selected and a custom tab named Cheeky Truffle Co highlighted after Return Policy](https://docs.j2commerce.com/images/docs/shared/tabs-products5.webp)

## Adding Custom Tabs to Products

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

After enabling and configuring the plugin, each product can have custom tabs.

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

**Custom Tab from Article ID:** Select an existing Joomla article. The article title becomes the tab title, and the article content becomes the tab body.

Click **Select** to Add Custom Tab from Article ID

![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)

Select the article you want to be displayed on the product.

![Product edit screen, Apps tab, with Custom Tabs expanded: Custom Tab from Article Id highlighted showing Allergy Disclosure, with Edit and Clear buttons](https://docs.j2commerce.com/images/docs/shared/tabs-products.webp)

### Adding Additional Custom Tabs

Click the **Add Custom Tab** button to create unlimited custom tabs.

![Product Apps tab highlighted with Custom Tabs expanded: Add Custom Tab button highlighted and a Return Policy tab row with its expand arrow](https://docs.j2commerce.com/images/docs/shared/tabs-products1.webp)

Each tab row has these fields:

**Tab Title:** The title displayed on the tab header

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

**Enabled:** Toggle to show or hide this tab.

**Tab Content:** The content displayed when the tab is active. Supports HTML and opens with the configured editor.

### Organize Tabs

The order in which tabs appear in the admin interface determines their display order on the frontend. The first tab appears first in the tab navigation.

**Bulk Actions:**

- **Collapse All** - Minimize all tab rows for easier navigation
- **Expand All** - Open all tab rows for editing
- **Delete** - Click the trash icon on any row to remove it

## Frontend View

![Storefront product page where the Allergy Disclosure and Return Policy tabs, highlighted, appear after Description and Specifications under the product](https://docs.j2commerce.com/images/docs/shared/tabs-products3.webp)

## How It Works

When a customer views a product page:

1. J2Commerce checks if the Custom Tabs plugin is enabled.
2. If **Display Brand Details** is enabled and the product has a manufacturer, a Brand tab is added.
3. Custom tabs defined on the product are rendered in order.
4. If **Prepare Content** is enabled, content plugins process the tab content.
5. All tabs appear in a Bootstrap 5 tabbed interface.

## Display Conditions

**Custom tabs appear when:**

- The plugin is **enabled** in **J2Commerce** **-> Apps**.
- At least one tab is configured (article-based or custom).
- The product is published and visible.

**The brand tab appears when:**

- **Display Brand Details** is set to '**Yes'**.

![Custom Tabs settings with the Display Brand Details switch highlighted as Yes, followed by Position Brand Accordion set to After](https://docs.j2commerce.com/images/docs/shared/tabs-config2.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:** Create an article with a Description/Bio of the manufacturer for it to show up on the frontend

## 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 tab titles may truncate 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 tabs for visibility.

## Troubleshooting

### Tabs Do Not Appear on Product Page

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

**Solution:**

1. Go to **J2Commerce** **-> Apps**.
2. Verify **Custom Tabs** shows a green checkmark (enabled).

   ![Joomla Apps list searched for tabs, with the Custom Tabs status icon highlighted as a green checkmark showing the app is enabled](https://docs.j2commerce.com/images/docs/shared/tabs-enable1.webp)
3. Edit the **product** and verify that at least one tab is configured and enabled in the Apps tab.

   ![Article edit screen, J2Commerce tab and Apps sub-tab highlighted, with Custom Tabs showing Allergy Disclosure and a custom tab row below](https://docs.j2commerce.com/images/docs/shared/tabs-products4.webp)
4. Check that the tab 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 **Custom Tabs** section of the **Apps** tab.

### Content Plugins Not Processing

**Cause:** **Prepare Content** is disabled.

**Solution:**

1. Go to **J2Commerce** **-> Apps ->** **Custom Tabs**.
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 or Manufacturer Tab Missing

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

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

**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 plugin loads Font Awesome.
3. Test with a known icon `fa-solid fa-check` to verify the library loads.