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

**IMPORTANT NOTE:** The app supports only the J2Store / J2Commerce's Product List layout and Joomla! articles that are treated as product. That is the catalog source should be Joomla! articles.

## Requirements <a href="#requirements" id="requirements"></a>

1. PHP 8.1.0 +
2. Joomla! 4.x/ Joomla! 5.x +
3. J2Commerce / J2Store 4.x +

## Installation:

**Step 1:** Go to our [J2Commerce website](https://www.j2commerce.com/) > Extensions > Apps

<figure><img src="https://1405307842-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKvFBYm8luCOko7zt2v%2Fuploads%2F1HOR3eb5bpDeySpnvhLK%2Fcustom-1.webp?alt=media&#x26;token=89450810-6dc4-48a7-b172-a0c040402143" alt=""><figcaption></figcaption></figure>

**Step 2:** Locate the Custom Tabs App > click View Details > Add to cart > Checkout.&#x20;

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

<figure><img src="https://1405307842-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKvFBYm8luCOko7zt2v%2Fuploads%2FhKMKoV9SdPp52ERKNJ0i%2Fcustom-2.webp?alt=media&#x26;token=b8c3fb1e-4495-47bb-b86a-c3ce82328489" alt=""><figcaption></figcaption></figure>

**Step 4:** Use the Joomla! installer to install the app. Go to System > Install > Extensions > Download the app

<figure><img src="https://1405307842-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKvFBYm8luCOko7zt2v%2Fuploads%2Fkmz3R3DKLmAViBaGX9TS%2Fuser-group-3.webp?alt=media&#x26;token=df901775-3871-4100-9644-753e700413c9" alt=""><figcaption></figcaption></figure>

**Step 5:** Go back to System > Manage > Extensions.

<figure><img src="https://1405307842-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKvFBYm8luCOko7zt2v%2Fuploads%2FDJTs13jo5FvpNZeE5dxh%2Fuser-group-5.webp?alt=media&#x26;token=b5b13e95-19dc-4361-9633-387daeb4a899" alt=""><figcaption></figcaption></figure>

**Step 6:** Search for the app and enable it.

<figure><img src="https://1405307842-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKvFBYm8luCOko7zt2v%2Fuploads%2FK41gDPqBjODNK4pwbdIi%2Fcustom-3.webp?alt=media&#x26;token=44b17118-8baa-402e-8c24-4360f772da27" alt=""><figcaption><p>Enable custom tab app</p></figcaption></figure>

## Settings:

Now it's time to open the app and configure the settings.&#x20;

**Step 1:** Go to Components > J2Commerce > Apps&#x20;

Find the Custom Tabs App and click on Open to configure basic settings of the app.

<figure><img src="https://1405307842-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKvFBYm8luCOko7zt2v%2Fuploads%2FHxnNkEIRjfE4RgvVbmQh%2Fcustom-4.webp?alt=media&#x26;token=b09fe877-18a0-4d03-ba18-ebc0375b8789" alt=""><figcaption><p>open custom tabs app</p></figcaption></figure>

<figure><img src="https://1405307842-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKvFBYm8luCOko7zt2v%2Fuploads%2Fwwag6cRbITS995ZbnTWs%2Fcustom-5.webp?alt=media&#x26;token=ecad0be1-92cb-46b5-8f9d-78b36dc96fcb" alt=""><figcaption><p>custom tab settings</p></figcaption></figure>

## Configuration:

**Prepare Content for Custom Tab Data:** The option allows you to choose if to prepare the data for the Custom tab or not.

**Process Content Field Short Code:** This field process the content field in custom field description.

Below is a detailed video on setting up the Custom Tab for a Product:

{% embed url="<https://youtu.be/K6qK4DSLTcQ>" %}

\\