> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/sections/information-tab/information-tabs-1.md).

# Information Tabs 1

## What is the Information Tabs 1 section?

We all understand how a folder with tabs helps organize documents so we can find them easily. In web design, this concept is used to neatly organize and display product features. 

This tabbed section transforms a standard product description into an engaging showcase. Take the specialty coffee in the example. It has a unique flavor, a specific origin, and a detailed processing method. A tabbed layout lets you present this information elegantly. 

When a customer clicks a tab, the relevant information is displayed instantly without them needing to leave the page. This saves space, creates a very clean look, and allows customers to interact directly with the details that interest them most.

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

[**Click here to see the link demo ->**](https://library.smind.io/pages/demo?view=information-tabs-1)

## How To Install The Information Tabs?

Step 1: In Shopify Admin, going to Smind Section app and find **Information Tab 1-1** in Section tab of Library. Click Install and Customize it.

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

Step 2: Going to Shopify Editor sidebar, choose any page template and click Add Section -> **Information Tab 1-1**

<figure><img src="/files/0JWncBlQUmsdghi3iZP4" alt=""><figcaption></figcaption></figure>

Step 3: Now you can customize for the layout, media, content, color and spacing of this section

**General Settings**

* **Layout**: This dropdown determines the width of the section on the page.
* **Subheading**: An introductory line of text.
* **Heading**: The main title for the section.&#x20;
* **Heading size:** Controls the font size of the heading text.&#x20;
* **Description**: A rich text field for a short paragraph below the heading
* **Heading alignment:** Sets the horizontal alignment for the Subheading, Heading, and Description.&#x20;

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

* **Desktop media width**: Adjusts the width of the media on desktop screens.&#x20;
* **Desktop media position**: Determines whether the media appears to the left or right  of the tab content.
* **Media height**: Sets the height of the media container. The options are XXS, XS, S, M , and L.

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

* **Content position**: Aligns the block of content within the tab.
* **Content alignment**: Sets the horizontal alignment of the text inside the content block.&#x20;
* **Content max-width**: A slider that controls the maximum width of the text content to ensure readability.&#x20;

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

* **Section color scheme**: This scheme applies to the border and shadow of the cards
* **Content color scheme**: This scheme applied to the background and text color of the main content area within the tabs.
* **Top padding**: Controls the amount of empty space above the section's content.
* **Bottom padding**: Controls the amount of empty space below the section's content.

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

**Image/ Video Block Settings - Information tabs**

* **Title**: This field is for the name of the tab
* **Image:** This is where you select the image that will be displayed when this tab is active.
* **Cover image**: This is a placeholder image that is displayed before the video plays.
* **Upload video**: This option allows you to upload a video file directly from your computer to your Shopify files.
* **Video URL**: You can paste a link to a video hosted on another platform. The field specifies that it accepts YouTube
* **Autoplay**: This is a toggle switch that, when enabled, will cause the video to start playing automatically as soon as the tab is opened

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

* **Subheading**: This is a small, introductory line of text that appears above the main heading to provide context.
* **Heading**: This serves as the main title for the content within the tab.
* **Heading size**: These buttons allow you to adjust the font size of the Heading text for visual hierarchy.
* **Description:** This is a rich text editor for the main body of text.
* **Button label:** This field defines the text that will appear on the button.
* **Button link:** This is where you set the destination URL for the button.&#x20;
* **Button style:** This dropdown menu determines the visual appearance of the button.
* **Button full-width:** This is a toggle switch that controls the button's width.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.smind.io/sections/information-tab/information-tabs-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.