# Product tabs

The **Product tabs** section offers an alternate layout for your product description and details. Add multiple tabs with additional information such as size or care guides, shipping and returns, or customer testimonials.

> The default product template uses the **Product tabs** section. Use one of the [alternate templates](https://help.fluorescent.co/stiletto/product-pages/product-template/alternate-templates) to display the product description and details in the product overview columns.

{% hint style="info" %}
On mobile, product tabs display as collapsible rows for the most optimal layout.
{% endhint %}

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2F7CotxYkAfv5fVkcvIZgE%2Fproduct-tabs.png?alt=media&#x26;token=9254b0c1-c4b7-4533-ab6f-c91be0d00bb9" alt=""><figcaption></figcaption></figure>

## Set up product description tab

***

The **Product description tab** displays the description of your product.

* Customize the headings, text, and content width
* To edit the product description, go to the product page in your Shopify admin.

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-2403360fd12dc13b6b93f2f36f91e41b780636ff%2Fproduct-tabs-description.jpeg?alt=media)

`Click Product description block to find settings`

<table><thead><tr><th width="284">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tab heading</mark></td><td>Change the <strong>Tab heading</strong> text from the default "Product description".</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading to either <strong>Small</strong>, <strong>Medium</strong>, <strong>Large</strong>, or <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the size of the description to either <strong>Small</strong>, <strong>Medium</strong>, <strong>Large</strong>, or <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Content width</mark></td><td><p>Select <strong>Full width</strong> to make the product description text span the width of the page.<br></p><p>Select <strong>Custom</strong> and adjust the <strong>Max width of text</strong> to control the width and line-breaks of the product description.</p></td></tr></tbody></table>

## Add product tabs

***

Click the **(+)** add block button and select one of three different types of product tabs: **One column**, **Two column**, or **Three column**.

Click a **Tab block** to add headings, text, and images to each column. You can also display optional **Page** content (eg. for a size guide).

<div><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FETzh0suEYklRmdNxqBXx%2Fproduct-tabs-blocks.jpeg?alt=media&#x26;token=f86615c6-c5b7-4eb9-9509-19a7c1aa19ab" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FSpD92RpYl1p0PL9FLzSS%2Fproduct-tabs-3columns.png?alt=media&#x26;token=b9c4d00f-c859-4904-af98-9a2596881d44" alt=""><figcaption></figcaption></figure></div>

`Click Column tab block to find settings`

<table><thead><tr><th width="209">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tab heading</mark></td><td>Enter <strong>Tab heading</strong> text to title the tab content.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter text to display in the tab.<br><br>Alternatively, insert <a href="#use-custom-page-content">custom page content</a> created in your Shopify admin.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading to either <strong>Small</strong>, <strong>Medium</strong>, <strong>Large</strong>, or <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the size of the text to either <strong>Small</strong>, <strong>Medium</strong>, <strong>Large</strong>, or <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Upload an image for a column. There are no required dimenesions. We recommend an image with a minimum width of 100px.</td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>Adjust the <strong>Image width</strong> between <strong><code>50%</code></strong> to <strong><code>100%</code></strong> of the column width.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the column images <strong>Above text</strong> or <strong>Below text</strong>.</td></tr><tr><td><mark style="color:blue;">Content width</mark></td><td><p><em>For One Column tabs</em><br><br>Select <strong>Full width</strong> to make the tab content span the width of the page.<br></p><p>Select <strong>Custom</strong> and adjust the <strong>Max width of text</strong> to control the width and line-breaks of the text.</p></td></tr><tr><td><mark style="color:blue;">Content vertical alignment</mark></td><td><em>For Two and Three Column tabs</em><br><br>Position tab text and images at the <strong>Top</strong>, <strong>Center</strong>, or <strong>Bottom</strong>.</td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td><em>For Two and Three Column tabs</em><br><br>Increase the amount space for columns with longer headings and text.</td></tr></tbody></table>

### Use custom page content

***

Create a page for your tab content in your Shopify admin using the rich text editor. You can add tables, images, links, and other rich text to display in the product tab. Custom page content is perfect for displaying a size chart.

{% hint style="success" %}
Pages are a Shopify feature. To learn more, see Shopify's [Pages](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages) manual.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Product tab** block to open the settings.

   > To display different page content (eg. different size charts) for specific products, add metafields and insert dynamic sources.
2. Use the **Select page** button to find the page you created in the Shopify admin.
3. Click **Save**.

</details>

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Flv7tcrJkesmZbyARbIQY%2Fproduct-tabs-table.png?alt=media&#x26;token=2549c2bd-5365-423a-8dec-99fe914893e0" alt="" width="563"><figcaption></figcaption></figure>

## Customize product tabs style

***

Click the **Product tabs** section to change the overall style and layout of the tabs.

`Click Product tabs section to find settings`

<table><thead><tr><th width="210">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tab alignment</mark></td><td>Position the tab buttons to the <strong>Left</strong> or <strong>Center</strong>.</td></tr><tr><td><mark style="color:blue;">Tab spacing</mark></td><td>Adjust the amount of space between the tab buttons.</td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Use the <strong>Heading</strong> or <strong>Body</strong> font from your theme settings.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Set the text size between <strong>Small</strong> and <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Color</mark></td><td>Set the colors for the tab <strong>background</strong> and <strong>text</strong>.</td></tr><tr><td><mark style="color:blue;">Enable animation</mark></td><td>Choose whether to display visual effects when scrolling, hovering, or interacting with the section.<br><br>See the <a href="../../theme-styles/animation">Animation guide</a> to learn more.</td></tr><tr><td><mark style="color:blue;">Padding</mark></td><td>Add a margin of space around the section to either the <strong>Top and bottom</strong>, <strong>Top only</strong>, <strong>Bottom only</strong>, or set it to <strong>None</strong>.</td></tr></tbody></table>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/stiletto/product-pages/product-template)