# Tabs content

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(56)_zATITNqz.jpg)

The **Tabs content** section lets merchants present essential info—like specifications, brand story, shipping policies, and more—in a clean, collapsible tab format. This improves user experience and keeps your pages streamlined.

## How to add a Tabs content section to your Shopify store

<Hint type="success">

Steps

1. In the theme editor (**Customize**), click **Add section.**
2. Locate **Tabs content.**
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Tabs content

### Section settings

#### Color scheme

Select a color scheme that matches your aesthetic.

🎨 Learn how to set up your Color schemes:

<PageLink href="https://docs.foxecom.com/hyper-theme/theme-settings/colors">Colors</PageLink>

#### Tab settings

* **Tab navigation style**:

<Hint type="success">

**Headings** are cleaner for simple layouts, while **Buttons** add more visual weight for a more interactive look.

</Hint>

<Tabs>
<Tab title="Headings">

![image](https://docs-assets.foxecom.app/hyper-theme/image_gNeOJaOh.png)

</Tab>

<Tab title="Buttons">

![image](https://docs-assets.foxecom.app/hyper-theme/image_i3NjfmQi.png)

</Tab>
</Tabs>

* **Text alignment**: Align your tab content to the left, center, or right.

<Tabs>
<Tab title="Left">

![image](https://docs-assets.foxecom.app/hyper-theme/image_r3jJq4MW.png)

</Tab>

<Tab title="Center">

![image](https://docs-assets.foxecom.app/hyper-theme/image_EjqHaoeW.png)

</Tab>

<Tab title="Right">

![image](https://docs-assets.foxecom.app/hyper-theme/image_M2I4wIOK.png)

</Tab>
</Tabs>

### Block settings

Available blocks:

* [Image with text](#image-with-text)
* [Tab](#tab)
* [Sidebar](#sidebar)

#### Image with text

Combine a heading, paragraph, and image—great for product specs or storytelling.

![image](https://docs-assets.foxecom.app/hyper-theme/image_ZFDcRTmX.png)

<Hint type="info">

Choose **Desktop image position** as **Left/Right** based on visual flow.

![](https://docs-assets.foxecom.app/hyper-theme/image_GU04NcJJ.png)

On mobile, the image and content are vertically stacked by default.

![](https://docs-assets.foxecom.app/hyper-theme/image_wCIcD5O4.png)

</Hint>

#### Tab

Showcase content using **Rich text** editor, **Custom liquid**, or pull **a page's content**.

![image](https://docs-assets.foxecom.app/hyper-theme/image_dBvV7plY.png)

![image](https://docs-assets.foxecom.app/hyper-theme/image_poWubZRS.png)

#### Sidebar

A great space for additional highlights, icons, or CTAs that complement the main tab content.

![image](https://docs-assets.foxecom.app/hyper-theme/image_BmbSrSG8.png)

<Hint type="info">

✅ Notes:&#x20;

* You can only add **one** sidebar block per Tabs content section.

* The Sidebar block is **not scroll-sticky**, so keep it simple and concise.

* On mobile view, the Sidebar block shows **at the end of the section**.

</Hint>

* **Position**: Place the Sidebar at the **Right/Left** of the section.

<Tabs>
<Tab title="Right">

![image](https://docs-assets.foxecom.app/hyper-theme/image_pClzc7C4.png)

</Tab>

<Tab title="Left">

![image](https://docs-assets.foxecom.app/hyper-theme/image_U43Zz2WB.png)

</Tab>
</Tabs>

* **Content:** Add a Heading and Description to the Sidebar.

![image](https://docs-assets.foxecom.app/hyper-theme/image_hPk1Zapi.png)

* **Icon with text:**

You can add up to 3 icon + text rows.

Each one includes:

* **Icon** from the built-in library (like Heart or Truck)
* **Custom Image** if you prefer using branded icons
* **Width and Color** to control icon size and match your branding
* **Heading** for the text that appears next to the icon

![image](https://docs-assets.foxecom.app/hyper-theme/image_BcKOSfFC.png)

* **Button**: Optional call-to-action with label text. Good for linking to another section or page.

![image](https://docs-assets.foxecom.app/hyper-theme/image_Z7QtcfAa.png)