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