Articles on: Integrations

Swatch Click Event API

Rubik Combined Listings emits a custom JavaScript event whenever a swatch is clicked. This allows developers to track interactions, trigger analytics events, or build custom logic.

Event name:

rcl_swatch_clicked

The event is dispatched on window and includes detailed information about the clicked swatch and related product.

Event detail properties:

Property	Type	Description
optionValue	string	Swatch label such as "Blue"
productId	number	Shopify product ID
productTitle	string	Product title
productUrl	string	Product page URL
productPrice	string	Formatted product price
hasPriceRange	boolean	Indicates if multiple variant prices exist
productAvailable	boolean	Stock availability
productCompareAtPrice	string	Compare-at price if on sale
isCurrent	boolean	True if the swatch is already selected
category	string	Swatch category label
swatchType	string	visual, button, or dropdown
context	string	product_page or product_card
viewport	string	desktop or mobile
position	number	Zero-based index within the group
groupOptionName	string	Option name such as "Color"
timestamp	number	Unix timestamp in milliseconds

Example usage with Google Analytics:

window.addEventListener('rcl_swatch_clicked', function(e) {
    gtag('event', 'swatch_click', {
        product_id: e.detail.productId,
        option_value: e.detail.optionValue
    });
});

This API makes it easy to measure swatch engagement and integrate with analytics tools, tag managers, or custom tracking systems.

Updated on: 16/02/2026

Was this article helpful?

Thank you!