For the complete documentation index, see llms.txt. This page is also available as Markdown.

Product info tabs

Display product information in tabbed content with images, icons, captions, and formatted text.

How to access

  1. Go to Shopify Admin → Online Store → Themes.

  2. Click Customize on your active theme.

  3. Click Add section on the page and choose Product info tabs.

Section Settings

Setting
Description

Layout

Expand to full width

Extends the section to the full browser width.

Color scheme

Sets the background and text colors.

Background opacity

Controls the background opacity.

Content

Heading

Sets the section heading text.

Heading size

Controls the size of the heading. Choose from Small, Medium, or Large.

Text

Adds supporting text to the section.

Text position

Shows the text above or below the heading.

Desktop content alignment

Aligns the section content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.

Image

Desktop tab position

Places the tab list before or after the content. Choose from Tab first or Tab last.

Desktop image placement

Sets whether the image appears first or last on desktop. Choose from Image first or Image last.

Aspect ratio

Sets the image aspect ratio. Choose from Square, Portrait, or Adapt to image.

Section padding

Top side

Sets the space above the section.

Bottom side

Sets the space below the section.

Section divider

Shapes

Adds a decorative divider to the section. Choose from Curve top, Curve bottom, Curve both, None, Border top, Border bottom, or Both border.

Blocks

Add blocks to this section in the theme editor. Each block is a separate tab you can add, remove, and reorder.

Content box

Adds a content tab with text, images, icons, and captions.

Setting
Description

Tab

Heading

Sets the tab heading.

Image

Image

Selects an image displayed in the tab content.

Content

Text

Adds descriptive content to the tab.

Caption

Adds a short caption displayed below the text.

Icon

Selects an icon displayed with the content.

Desktop content alignment

Aligns the tab content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.

Common Questions

Can I create multiple tabs?

Yes. Add multiple Content box blocks to create additional tabs.

Can each tab have different content?

Yes. Each Content box block can have its own heading, image, text, caption, and icon.

Last updated