# Tabs content

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 style="success" %} Steps 1. In the theme editor (**Customize**), click **Add section.** 2. Locate **Tabs content.** 3. Make necessary changes. 4. **Save.** {% endhint %} ## How to edit a Tabs content ### Section settings #### Color scheme Select a color scheme that matches your aesthetic. :art: Learn how to set up your Color schemes: {% content-ref url="../theme-settings/colors" %} [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors) {% endcontent-ref %} #### Tab settings * **Tab navigation style**: {% hint style="success" %} **Headings** are cleaner for simple layouts, while **Buttons** add more visual weight for a more interactive look. {% endhint %} {% tabs %} {% tab title="Headings" %}

{% endtab %} {% tab title="Buttons" %}

{% endtab %} {% endtabs %} * **Text alignment**: Align your tab content to the left, center, or right. {% tabs %} {% tab title="Left" %}

{% endtab %} {% tab title="Center" %}

{% endtab %} {% tab title="Right" %}

{% endtab %} {% endtabs %} ### 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.

{% hint style="info" %} Choose **Desktop image position** as **Left/Right** based on visual flow. ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fkm9GYD7wfpsrDIpKYczE%2Fimage.png?alt=media\&token=e7a6ece3-5bb5-450c-bad4-69291677f316) On mobile, the image and content are vertically stacked by default. ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F0Mzyv6BAMdQWQFh4wpQG%2Fimage.png?alt=media\&token=1ef24db3-79a5-46e2-a5f6-a2e8fe562e31) {% endhint %} #### Tab Showcase content using **Rich text** editor, **Custom liquid**, or pull **a page's content**.

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

{% hint style="info" %} :white\_check\_mark: Notes: * 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**. {% endhint %} * **Position**: Place the Sidebar at the **Right/Left** of the section. {% tabs %} {% tab title="Right" %}

{% endtab %} {% tab title="Left" %}

{% endtab %} {% endtabs %} * **Content:** Add a Heading and Description to the Sidebar.

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

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

***