How to change swatch display on broadcast theme?

Hi there community,

We are looking to make a change to how the display of our swatches look on our site and wondered if someone maybe able to help. We are using broadcast theme.

Currently our swatches are displayed on both our collection and product pages, but we are not happy with the way they look on the collection page. Specifically the theme lists how many swatch variations are available per product. See the example below where they state 1 Material.

On desktop when you hover over the 1 Material it shows the option available as a swatch and on the mobile there is no capability to hover over it to show the swatch. See below image.

What we want to try and achieve on both mobile and desktop is to remove the 1 Material altogether and instead replace it with the swatch and the swatches name alongside it. It would look something like this example:

We want to implement this on all products where there is a Material variant available on a product to trigger the swatch to show up as per above.

Any assistance would be greatly appreciated.

Thanks!

1 Like