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

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

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Info tabs.
Enter a Section subheading, a Section heading, and a Section description, and choose a Heading size.
Click a Tab item block. Select an Image, and enter a Heading and a Description.
To add more tabs, click Add block > Tab item.
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

Click the Info tabs section.
Under Controller, select Enable autoplay.
Drag Change tab every to set how long each tab stays open, from 3 to 10 seconds.
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

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

Add a button below the tabs

Under Button, enter a Label.
Choose a Style and add a Link.
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

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.

Updated on: 22/10/2026

Was this article helpful?

Thank you!