# 8.SET

![8.SET with add-to-cart functionality active](https://2912494604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LHKqRZhVzu1H_Op1cBA%2Fuploads%2F0kmPKJRBMTLwdkYu77sD%2F8-set-compose.png?alt=media\&token=b5395201-753a-4c48-924a-bf7df8126ed0)

## Widget-Element

### **Show complementary products for a given SKU or Main-SKU**

{% code overflow="wrap" %}

```markup
<div data-8select-widget-id="8.SET" data-touchpoint="product" data-sku="insert-sku-of-currently-viewed-product"></div>
```

{% endcode %}

* `data-touchpoint` is a static attribute - find more about it under [touchpoints](https://docs.8select.io/widgets/touchpoints)
* `data-sku` is a dynamic attribute
  * its value is the [SKU](https://docs.8select.io/product-export/base-data/details#sku-sku) or [Main-SKU](https://docs.8select.io/product-export/base-data/details#main-sku-main-sku) of the product variant the customer is viewing in the shop
  * the [SKU](https://docs.8select.io/product-export/base-data/details#sku-sku) or [Main-SKU](https://docs.8select.io/product-export/base-data/details#main-sku-main-sku) has to be the same value that is used in the [product export](https://docs.8select.io/integration/produkt-export)
  * in case the viewed variant is changed, for example via a color drop-down the value has to be updated via `_8select.updateWidgetSku()`

### Update SKU in case of non-size variant change

{% hint style="warning" %}
The played out content is specific to visual variants such as colour or pattern. When the visual variant changes the widget has to be updated!
{% endhint %}

The played out content is specific to visual variants such as colour or pattern. \
To retrieve the content of the currently selected visual variant, the current SKU must be passed to the widget when the visual variant is changed. For example if a customer is currently viewing the red variant of a shirt and changes to the blue variant, the 8.SDK has to be informed about the changed SKU to load content for the changed visual variant.\
\
This must not happen when changing the size, as the content is size-independent.

```javascript
window._8select.updateWidgetSku('8.SET', 'your-new-sku-here')
```