> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/vertical-tabs.md).

# Vertical tabs

This section improves content organization while keeping the experience interactive and visually engaging.

***

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

The **Vertical tabs** section organizes content into clickable tabs, allowing customers to switch between different media (images/videos) and content without leaving the section. It’s ideal for showcasing collections, features, or storytelling in a structured and interactive layout.

### 1. Our guide to set up a Vertical tabs section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Vertical tabs.**
* Click **Save.**
  {% endhint %}

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FXGcjJ7Weenm74sOqXdzo%2FScreenshot%202026-04-21%20at%205.21.04%E2%80%AFPM.png?alt=media&amp;token=c13b9fdd-9f35-4cf9-9595-31db369a4dab" alt=""><figcaption></figcaption></figure>

### 2. **Section settings**

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2Fd00103MabvrYqvpfRRf2%2FScreenshot%202026-04-21%20at%205.30.51%E2%80%AFPM.png?alt=media&amp;token=03a2c1bc-2217-4096-bd1d-1a733dc5757d" alt=""><figcaption></figcaption></figure>

* **Color scheme:** Controls the overall background and text colors of the section, including tab titles.
* **General**
  * **Heading:** Add a title for the section.
  * **Heading size:** Adjust the prominence of the heading.
  * **Desktop image height:** Set a fixed height for media on desktop.
  * **Adapt section height to image size:** When enabled, the section height follows the original image size.
* **Mobile layout**
  * **Mobile image height:** Adjust media height on mobile devices.
  * **Mobile content alignment:** Control text alignment for better readability on smaller screens.
* **Corner radius:** Adjust the roundness of media (image/video) inside each tab.

### **3. Tab block settings**

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FHQXQmYNaviMNkac6sYoo%2FScreenshot%202026-04-21%20at%208.38.10%E2%80%AFPM.png?alt=media&amp;token=54a3f33f-e76f-48ca-a93e-c6e395cbd532" alt=""><figcaption></figcaption></figure>

Each **Tab block** represents one tab item with its own media and content.

* **Tab heading:** Defines the tab name. *If left empty, the tab will not be displayed.*
* **Content:**
  * **Image:** Upload an image for the tab.
  * **Video:** Upload an autoplay video. *If both image and video are set, video will override the image.*
  * **Media overlay opacity:** Add an overlay to improve text readability on media.
  * **Heading:** Add a title displayed over the media.
  * **Heading size:** Adjust text size.
  * **Description:** Add supporting content below the heading.
  * **Button label:** Add CTA text.
  * **Button link:** Assign a destination URL.
  * **Use outline button style:** Toggle between solid and outline button styles.
* **Colors:** Customize content colors independently from the section:
  * **Heading color**
  * **Text color**
  * **Button label color**
  * **Button background color**
  * **Button outline color**