# Horizontal tabs

With a variety of block types and customizable options, this section is ideal for displaying product features, or details information like ingredients, brand story, etc. The dynamic tab interface reduces clutter, enhances readability, and provides a seamless navigation experience across desktop and mobile devices.

<figure><img src="/files/Y0ybDlSr5xYR7F9TmyfO" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Horizontal tabs** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/uGoju7aLbpihXSTJUnWr" alt=""><figcaption></figcaption></figure>

### 2, Section settings

* **Section header:**
  * **Desktop content alignment:** Control the horizontal alignment of the section header on desktop screens: **Left, Center, Right**
* **Mobile layout:**
  * **Open first tab by default**: If enabled, the first tab will automatically open on mobile devices. Ensures immediate visibility of content, improving user experience.
* **Section:**&#x20;
  * **Show divider line**: If checked, a horizontal divider line will appear between the tabs and the content below. This helps visually separate the tab navigation from the section content, improving clarity and structure.

### **3, Block settings:**

* **Common features across blocks:** All blocks in the **Horizontal tabs section** share the following feature:
  * **Tab title:** Enter the title for each tab. If left blank, the block will not be visible.
* **Unique features by block type:**

{% stepper %}
{% step %}
**Rich text block**

* **Content:** Enter inline text content for the tab.
* **Tab content from page:** Pull content directly from a page. If set, this overrides inline text.
* **Button settings**: Add text for the button label. Assign a clickable link for navigation. Choose the visual appearance of the button: Solid, Outline or Text.
  {% endstep %}

{% step %}
**Multicolumn block:**&#x20;

Allows you to showcase up to **four** columns of content with images, headings, descriptions, and buttons. This block is ideal for summarizing key features, benefits, or options in an organized layout.

* **Layout:** Select the number of columns to display (2, 3, or 4 columns). The block automatically adjusts the column layout to match the selected number.
* **Image ratio:** Set the shape of the images in each column: **Portrait, Square, Circle, Landscape**
* Each column within the block has these settings:
  * **Image:** Upload an image for the column.
  * **Heading:** Add a heading for the column.
  * **Description:** Enter text below the heading. Provide additional details under the heading. This text can elaborate on the feature or benefit being highlighted.
  * **Button settings:** Configure the label, link, and style of the button for the column.
    {% endstep %}

{% step %}
**Media with text block:**&#x20;

Combines images or videos with text to create a visually engaging layout. It’s perfect for explaining products, showcasing tutorials, or highlighting specific promotions.

* **Image settings**: Upload an image to the block. Adjust the height of the media. Choose whether the media appears to the left or right of the content.

{% hint style="info" %}
**Note**: ***Media height** setting & **Desktop media position** setting apply to both **image** and **video**.*&#x20;
{% endhint %}

* **Video settings**: When both an image and a video are set, the video will override the image.

  * **Shopify-hosted video:** Upload a video to be hosted on Shopify.
  * **External video:** Add a YouTube or Vimeo URL to display external videos.

  **Note**: *If both a Shopify-hosted video and an external video are provided, the Shopify-hosted video will take precedence.*

  * **Video thumbnail:** Set a custom thumbnail image for the video. The thumbnail will display before the video is played.
  * **Enable video autoplay:** Video automatically mute to enable autoplay.
  * **Video description:** Add alt text for the video, improving accessibility for screen readers.
* **Content settings**: Add a heading for the block. Provide detailed description below the heading. Add a call-to-action button and customize the button appearance.
  {% endstep %}
  {% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/section/horizontal-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.