# Product info tabs

The **Product Info Tabs** feature helps organize detailed product information into collapsible or clickable tabs, making it easier for customers to browse key details without scrolling through long descriptions.

{% hint style="success" %}

1. **Go to Shopify Admin** > Online Store > Themes.
2. Click **Customize** on your active theme.
3. Select the **Product Page** from the theme editor.
4. Click **Add Section** > **Product Info Tabs**
5. Customize the tabs by adding relevant content like **Description, Shipping Info, Reviews, FAQs, or Size Charts**.
   {% endhint %}

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

### **Settings & Customization**

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

#### **Layout Settings**

* **Expand to Full Width:** Enable this option to stretch the section across the entire screen width.
* **Color scheme :** You can customize the section’s appearance by changing the **text color, background color**, and more using preset color options.
* **Background Opacity:** Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.

#### **Content**

* **Heading:** Set a custom title (e.g., "Collection List with Banner")
* **Heading Size:** Choose from **Small, Medium, or Large**.
* **Text:** Add optional supporting text.
* **Text Position:**
  * **Above Main Heading** : Position the subheading above the main heading.
  * **Below Main Heading :** Position the subheading below the main heading.
* **Desktop Content Alignment:** Set text alignment for desktop **(Left, Center, or Right)**.

#### **Image**

* **Desktop Tab Position**: Choose **Tab First** (tabs appear before the image) or **Tab Last** (tabs appear after the image). Tabs autoplay on mobile devices.
* **Desktop Image Placement:** Choose the options **Image First** and **Image second** (default for mobile layout).
* **Aspect ratio :** There are 3 option image ratio as **( Adapt to image, square, and portrait)** Can choose the required style as theme requirement.

#### **Section Padding** <a href="#section-padding" id="section-padding"></a>

* **Top Padding:** Adjust spacing above the section.
* **Bottom Padding:** Adjust spacing below the section.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

{% hint style="success" %}
**Product Info Tabs > Add Content Box**
{% endhint %}

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

### **Content Box Settings**

**Tab**

* **Heading:** Set a custom title for the tab (e.g., "Key Ingredients").

**Image**

* **Image :** Upload a custom image or select from free images.

**Content**

* **Text :** Provide details about the product, brand, or special announcements.
* **Caption:** Add a short, descriptive caption.
* **Icon :** Upload a custom image or select from free images.
* **Desktop Content Alignment:** Set text alignment for desktop **(Left, Center, or Right).**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themessupport.gitbook.io/lollipop-theme/sections/product-info-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.