# Tabbed collections

Use the **Tabbed collections** section to display products from multiple collections that visitors can switch between.

{% hint style="info" %}
You can customize the [Quick shop buttons](https://help.fluorescent.co/cornerstone/products/quick-shop) and popovers in **Theme settings > Product listings**.
{% endhint %}

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F1KwpnNFSxeQ318MS5LIY%2Ftabbed-collection-barista.jpg?alt=media&#x26;token=dde93c48-ab95-42c3-84a1-4093ac48e842" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Tabbed collections**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

Sections include general styles. Click the section to find options for **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Settings reference

Click the **Tabbed collections** section to find the following settings.

**Header content**

<table><thead><tr><th width="225">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Center header content</td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td>Accent</td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td>Heading</td><td>Add text to show a main heading above the section.</td></tr><tr><td>Subheading</td><td>Add text to show a subheading below the main heading.</td></tr><tr><td>Maximum text width</td><td>Set the maximum width of heading text between 400 and 1000 pixels.</td></tr></tbody></table>

**Product list**

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Maximum number of products</td><td>Set the maximum number of products to display within in the section: between 3 and 15.</td></tr><tr><td>Number of columns on desktop</td><td>Choose how many products to show per row on desktop screens: either 3, 4, or 5 columns.</td></tr><tr><td>Number of columns on mobile</td><td>Choose how many collections to show per row on mobile screens: either 1 or 2 columns.</td></tr><tr><td>Enable slider on desktop</td><td>Display products in a single-row carousel that visitors can click through to view more.</td></tr><tr><td>Enable slider on mobile</td><td>Display products in a single-row carousel that visitors can swipe left and right view more.</td></tr></tbody></table>

**Collection block**

Add multiple **Collection** blocks to feature their products. Each collection will appear as a tab that visitors can click to view.

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Select collection</td><td>Select a collection to display its products. Collections are created and edited in your Shopify admin. See <a href="https://help.shopify.com/en/manual/products/collections">Shopify's Collections manual</a> to learn more.</td></tr></tbody></table>

**"View all" tile**

<table><thead><tr><th width="193">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show “View all” tile</td><td>Show a tile at the beginning or end of the product list to link to the collection page.</td></tr><tr><td>Tile location</td><td>Display the “view all” tile at the Beginning of list or End of list.</td></tr><tr><td>Heading</td><td>Add text to show a heading for the “View all” tile.</td></tr><tr><td>Text</td><td>Add text to show below the heading. The default text is “Shop all”.</td></tr><tr><td>Color scheme</td><td><p>Change the color scheme applied to the section text and background.<br><br>Select the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default colors: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You may also select one of the two custom color schemas.</p><p><br>Learn more about <a href="../../../theme-styles/colors#color-schemes">Color schemes</a>.</p></td></tr><tr><td>Override with custom colors</td><td>Check this option to use custom colors for the section. These colors will override the color scheme.</td></tr><tr><td>Text color</td><td>Select a custom color for the heading and text of the “View all” tile. This setting applies only if the Override with custom colors option is enabled.</td></tr><tr><td>Background color</td><td>Select a custom color for background the “View all” tile. This setting applies only if the Override with custom colors option is enabled.</td></tr><tr><td>Image</td><td>Select an image to display as the background of the title. The image will override the color scheme and use the overlay colors selected in your theme settings.</td></tr><tr><td>Image focal point</td><td>Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="../../../general/image-guide/theme-image-settings#image-focal-point">Image settings guide</a>.</td></tr><tr><td>Tint opacity</td><td>Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.</td></tr><tr><td>Tint style</td><td>Choose to use a Solid overlay color or Gradient overlay for the tint. The gradient style fades across a range of hues. You can select the angle and direction of the gradient from one of four options.</td></tr><tr><td>Override with custom colors</td><td>Check this option to use custom overlay colors for the tint. These colors will override the overlay colors selected in your theme settings.</td></tr><tr><td>Text color</td><td>Select a custom color for the heading and text of the “View all” tile. This setting applies only if the Override with custom colors option is enabled.</td></tr><tr><td>Tint color</td><td>Select a custom overlay text color for the tint. This setting applies only if the Override with custom colors option is enabled.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Featured collection](https://help.fluorescent.co/cornerstone/pages/theme-sections/featured-collection)\
> [Featured collection with media](https://help.fluorescent.co/cornerstone/pages/theme-sections/featured-collection-with-media)