# Swatch collection styles

> Introduced in Broadcast 5.6

Broadcast includes flexible swatch and sibling display options, including:

* Circle or Square shaped swatches and siblings
* Regular or large-sized swatches and siblings

In addition to the size and shape, Broadcast includes swatch and sibling collection styles for all your collection pages and product grid listings:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F11kZ6tN1X79j4ft5aE6G%2Fcollection-style.jpg?alt=media&#x26;token=50c262c6-b395-4ac9-b859-8faf158cd581" alt="The image is highlighting the theme settings for swatches while also showing an example of how they look on the product grid"><figcaption></figcaption></figure>

#### Examples of collection style options:

### Slider on hover

Clean text is displayed on the Product grid. Upon hover, the text is replaced with swatches or siblings. The slider feature keeps all swatch options aligned horizontally on a single line:

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/P4064c8UHNeohqMD7lRo/slider-on-hover.gif" alt="A gif with an example of how the slider on hover style works on the product grid"><figcaption></figcaption></figure>

### Text only

A clean text version that displays the number of swatches or siblings that are available:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FFMRTddm9ZMKuLpR4HppM%2Ftext-only.jpg?alt=media&#x26;token=a9d516eb-4c1f-4cca-8cc6-4cfbe8a4853a" alt="An image with an example of how the text only style works on the product grid"><figcaption></figcaption></figure>

### Swatches with text

Displays a sample of swatches or siblings on a single line and indicates how many additional options are available with text:

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/LopWr8o6AbVD7O55VUxC/siblings%20swatches%20and%20text.jpg" alt="An image with an example of how the swatches with text style works on the product grid"><figcaption><p><strong>Siblings</strong> example</p></figcaption></figure>

### Slider

Displays the swatch or siblings slider on one line at all times:

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/ROAB0qLRHphv76yYXYJ9/slider.gif" alt="A gif showing an example of how the slider style works on the product grid"><figcaption></figcaption></figure>

### Grid

Displays all possible swatches or sibling options that are available to choose from:

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/5L4nxZ9ulqKb2IqmFp86/grid.jpg" alt="An image with an example of how the grid style works on the product grid"><figcaption></figcaption></figure>

### How to configure

Use the global **Theme Settings** -> **Swatches** -> **Collection style**

Choose your collection style in the drop-down:

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/9sv5EPHG5IesXidTbsob/configure%20collection%20style.jpg" alt="An image showing from where to configure the collection styles inside the theme settings "><figcaption></figcaption></figure>

**Save** your changes.&#x20;

### Speed and performance

The load time for collections and the product grid increases significantly when many swatches are loaded. Stores looking to improve the load times can use:

* Text only
* Swatches with text

These two require the fewest queries to be sent to Shopify's backend when loading a collection page or product grid section. Text-only is the fastest, as it doesn't need to load any images. Swatches-with-text only loads five swatches, which is a good, balanced option.&#x20;

The slider and grid styles will load all swatches, making them the slower options. To help reduce the number of queries, decrease the number of items displayed per page. This method will help optimize load times regardless of which swatch style you choose.&#x20;