# 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fw3hQHO0EhpVwHSpkv5ut%2FInformation%20Tabs%2011.gif?alt=media&#x26;token=772f246a-b466-41b1-a2c0-e6affde6ad2e" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fkt4lQ8X6xrqSGD90coIE%2FFrame%20427319158.png?alt=media&#x26;token=a7629662-8421-4742-8d00-031a2ae2b7a4" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F2FxnL792gUBvM4ymshhw%2FFrame%20427319157%20(1).png?alt=media&#x26;token=9d6dbee8-8670-48a8-95e9-5c4ebfa2cbc0" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FvsNgq7nz9R4Wf8Nxxn8l%2FFrame%20427319157%20(2).png?alt=media&#x26;token=8d77cebb-db29-4e47-9df3-0de3df60c0ee" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F9KY1GlvdSEX5PydqXEaV%2FFrame%20427319157%20(3).png?alt=media&#x26;token=62f1993c-6333-40d2-acaf-92752b93e59d" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F7yjSk4EhbnZsyRfzDKub%2FFrame%20427319157%20(4).png?alt=media&#x26;token=d26f62b9-0cb6-4086-9fe8-10e094db013b" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FefOh4xFdl7KFxHvouzbu%2FFrame%20427319156%20(9).png?alt=media&#x26;token=ada5dfaa-22da-4088-a6b3-c36f6831af09" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FzAoqFrzv5FupUHRY3iMB%2FFrame%20427319157%20(5).png?alt=media&#x26;token=91857e1c-d3b7-4150-bf02-7c4502cbc6c8" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FY0OsxnVCiofXXOOXFHtD%2FFrame%20427319157%20(6).png?alt=media&#x26;token=3f506564-9884-404e-8d20-355fa68ca01f" alt=""><figcaption></figcaption></figure>