Smart Product Filter & Search by Globo

Smart Product Filter & Search by Globo lets shoppers narrow collections by option, tag, vendor, price, and more, and adds instant search. It’s a popular pairing with Color Swatches: Globo filters the collection down, our swatches show each product’s color choices right on the filtered cards.

The integration works out of the box in most cases. Follow the steps below only if swatches don’t appear on a collection page after a shopper filters.

Globo renders the product grid from its own Liquid template, so swatches need a container in that template to show up.

Note

This applies to older versions and non-standard setups. On current versions, swatches usually render without any of this.

Setup

1. In your theme editor, open App embeds and turn on the collection swatches embed.

2. Add this marker to the first line of globo.filter.product.liquid so Globo keeps your edit instead of regenerating the file:

   {% comment %}Do not edit this file{% endcomment %}

3. In the same file, add the swatch container where you want swatches to appear:

   <div data-pl-swatches-collection data-product-id="{{ product.id }}" data-product-url="{{ product.url }}"></div>

Swatches now render on filtered collection pages.