Rubik Swatch Click Event (rubik-swatch-clicked)

Rubik Variant Images & Swatch fires a custom JavaScript event every time a customer clicks a swatch on the product page. This event allows developers to run custom logic whenever a variant option is selected.

This is useful if you want to integrate Rubik with third party apps, custom scripts, analytics tools, or any theme level functionality.

Event Name

rubik-swatch-clicked

How to Listen for the Event

You can listen for this event anywhere in your theme by adding the following code:

document.addEventListener('rubik-swatch-clicked', function(event) {
  console.log('🎨 Swatch Clicked!', {
    optionName: event.detail.optionName,
    optionValue: event.detail.optionValue,
    optionValueId: event.detail.optionValueId,
    element: event.detail.element
  });
});

Event Payload

When a swatch is clicked, Rubik sends the following details:

• event.detail.optionName

The name of the selected option (example: “Color” or “Size”)

• event.detail.optionValue

The selected value (example: “40”, “Black”, “Orange”)

• event.detail.optionValueId

Shopify's internal option value ID, useful for API or metafield logic

• event.detail.element

The actual DOM element that was clicked (useful for UI customizations)

Updated on: 27/11/2025