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 gird listings:

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:

Text only

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

Swatches with text

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

Slider

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

Grid

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

How to configure

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

Choose your collection style in the drop-down:

Save your changes.

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.

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.