> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Info Tabs

**Theme:** Shine · **Section type:** All-template section

The Info tabs section shows a numbered list of short topics next to an image. Each tab has its own heading, description, and image, so you can explain your values, materials, or services step by step in a small space.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds up to 5 tabs. The section comes with 3 tabs.
![Info tabs section with 5 numbered tabs next to an image](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-info-tabs-1_c3tzax.jpg)

**What you can do**
- Add the section and your tabs
- Switch tabs automatically
- Change the layout and image size
- Add a button below the tabs
- See what customers see
- Change the info tabs settings
- Fix common problems

---

## Add the section and your tabs
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Info tabs**.
3. Enter a **Section subheading**, a **Section heading**, and a **Section description**, and choose a **Heading size**.
4. Click a **Tab item** block. Select an **Image**, and enter a **Heading** and a **Description**.
5. To add more tabs, click **Add block** > **Tab item**.
6. Click **Save**.

> **Tip:** Use images with the same shape for every tab, and set **Image ratio** under **Tabs item** to match them (Square, Portrait, or Landscape). The image area keeps the same size when customers switch tabs.

## Switch tabs automatically
1. Click the **Info tabs** section.
2. Under **Controller**, select **Enable autoplay**.
3. Drag **Change tab every** to set how long each tab stays open, from 3 to 10 seconds.
4. Click **Save**.

With autoplay on, a progress circle fills around the active tab number. When it's full, the next tab opens.

## Change the layout and image size
1. Under **Large screen**, set **Section heading alignment** to **Left** or **Center**.
2. Set **Tabs ordering** to **Text first** (tabs on the left) or **Image first** (image on the left).
3. Set **Image width on large screen** to **50%** or **70%** of the section width.
4. Under **Mobile screen**, set **Section heading alignment** and **Tabs ordering** for small screens.
5. Click **Save**.

## Add a button below the tabs
1. Under **Button**, enter a **Label**.
2. Choose a **Style** and add a **Link**.
3. Click **Save**.

The button appears below the section and follows the section heading alignment. If **Label** is empty, there is no button.

## What customers see
- **Large screens:** the tabs show as a numbered list with headings. Customers click a tab to open its description, and the image changes to match.
- **Tablets and phones:** the numbers show in a row. Customers tap a number to see that tab's heading, description, and image.
- **Autoplay:** tabs change on their own only while the section is on screen. When a customer clicks a tab, autoplay continues from that tab.
![Info tabs on mobile with the second tab selected](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-info-tabs-2_1occ229.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the section colors. Color schemes are set in Theme settings > Colors. |
| Section subheading | Adds a short line above the heading. |
| Section heading | Adds the section heading. To highlight words, put them between [ and ] and choose the style in Theme settings > Typography. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | Adds a short text below the heading. |

### Tabs item
| Setting | What it does |
| ---- | ---- |
| Image ratio | Sets the shape of the image area: Square, Portrait, or Landscape. |

### Controller
| Setting | What it does |
| ---- | ---- |
| Enable autoplay | Opens the next tab automatically and shows a progress circle around the tab number. |
| Change tab every | Sets how long each tab stays open, from 3 to 10 seconds. The editor shows the number without a unit. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the section heading and the button Left or Center. |
| Tabs ordering | Shows the tabs first (Text first) or the image first (Image first). |
| Image width on large screen | Sets the image width to 50% or 70% of the section. The tabs use the rest. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the section heading and the button Left or Center on small screens. |
| Tabs ordering | Shows the tabs first (Text first) or the image first (Image first) on small screens. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | Sets the button text. The button is hidden if the label is empty. |
| Style | Shows the button as Filled, Outlined, or Text link. |
| Link | Sets the page the button opens. |

### Tab item block
| Setting | What it does |
| ---- | ---- |
| Image | Sets the image shown when this tab is open. |
| Heading | Sets the tab heading. |
| Description | Sets the text shown when the tab is open. |

## Troubleshooting
**I can't add a sixth tab.**
Each section holds up to 5 tabs. Add a second Info tabs section for more.

**Autoplay doesn't start.**
Check **Enable autoplay** under **Controller**. Autoplay runs only while the section is visible on the screen.

**The images are cropped.**
The image area uses the **Image ratio** you chose. Pick the ratio closest to your images, or crop your images to that shape.

**The tabs column is too narrow.**
Set **Image width on large screen** to **50%** to give the tabs more space.

## Related articles
- [Shine Value List](https://doc.ecomx.co/en/article/shine-theme-value-list-1tg3t44/)
- [Shine Icon With Text](https://doc.ecomx.co/en/article/shine-icon-with-text-1tsoudb/)
- [Shine Media With Text](https://doc.ecomx.co/en/article/shine-media-with-text-column-hds0dn/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)