> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop-theme/sections/product-info-tabs.md).

# 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

<div><figure><img src="/files/d5ZaHOfa65254FLGlXqS" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8OkyyNq3ZitTyM26ku5q" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="/files/eTvjdAyaMEtZu9zfoyP8" alt=""><figcaption></figcaption></figure>

| 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

<details>

<summary>Can I create multiple tabs?</summary>

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

</details>

<details>

<summary>Can each tab have different content?</summary>

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

</details>