This is an advanced guide. You'll need to know how to use your browser's developer tools.


First, paste this into your theme.liquid file. You'll need to change where it says .product-wrapper and .product__details.

This first one is the class of your product element on the collection page.

The second one is the class inside the product element where you want the swatches to go.


<style>
  .bcpo-color-preview {
    display: flex;
    justify-content: flex-start;
    margin: 7px auto 0;
    width: 80%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .bcpo-color-preview div {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    border: 1px solid gray;
    margin: 3px;
    flex-shrink: 0;
  }
</style>

<script>
    window.bcpo_multi = [];
    
    window.addEventListener('load', function () {
      for (var i = 0; i < bcpo_multi.length; i += 1) {
        if (!bcpo_multi[i][1]) continue;
        var el = $('.product-wrapper[data-product-id="' + bcpo_multi[i][0].id + '"]');
        if (!el.length) continue;
        var preview = $('<div class="bcpo-color-preview"></div>');
        el.find('.product__details').append(preview);

        for (var j = 0; j < 3; j += 1) {
          var obj = bcpo_multi[i][1]['type' + j];
          if (obj) {
            for (var prop in obj) {}
            if (obj[prop] === 'colors' || obj[prop] === 'images' || obj[prop] === 'auto-images') {
              break;
            }
          }
        }
        var swatches = [];
        var variantImage;
        if (obj[prop] === 'auto-images') {
          for (j = 0; j < bcpo_multi[i][0].variants.length; j += 1) {
            if (bcpo_multi[i][0].variants[j].featured_image) {
              variantImage = bcpo_multi[i][0].variants[j].featured_image.src.split('?')[0];
              if (swatches.indexOf(variantImage) === -1) {
                swatches.push(variantImage);
              }
            }
          }
        } else {
          bcpo_multi[i][1][obj[prop] + j];
        }
        for (j = 0; j < swatches.length; j += 1) {
          for (var prop2 in swatches[j]) {}
          var previewEl;
          if (obj[prop] === 'images') {
            previewEl = '<div style="background: url(' + bcpo.getSizedImageUrl(swatches[j][prop2], '128x128') + ') 50% 50% / cover;"></div>';
          } else if (obj[prop] === 'auto-images') {
            previewEl = '<div style="background: url(' + bcpo.getSizedImageUrl(swatches[j], '128x128') + ') 50% 50% / cover;"></div>';
          } else {
            previewEl = '<div style="background: #' + swatches[j][prop2] + '"></div>';
          }
          preview.append(previewEl);
        }
      }
    }, false);
</script>


Next, find the file where the products are being loaded on the collection page. To find this file, you can start at your collection.liquid file and then follow the includes.

In my theme (Pop), I followed them like this:  Templates/collection.liquid -> Sections/collection-template.liquid -> Snippets/product-grid-item.liquid


Paste this code at the top of this file since this file will be loaded once per product on the collection page, and the {%product%} variable is available there.


<script>
bcpo_multi.push([
  {{product | json}},
  {% if product.metafields.bcpo.bcpo_data %}{{ product.metafields.bcpo.bcpo_data }}{% else %}null{% endif %},
  '.bcpo-multi-{{ product.id }} form'
]);
</script>


The last step is to add a data attribute to the product element.

Find the element whose class you found in the first step, and add this data attribute to it.


<div class="product-wrapper" data-product-id="{{product.id}}">
...