> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://rubikvariantimages.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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)