> For the complete documentation index, see [llms.txt](https://docs.8select.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.8select.io/widgets/8.similar.md).

# 8.SIMILAR

![similar shoes](/files/-MULCJIn0dMAaYgDFDde)

## Widget-Element

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

{% code overflow="wrap" fullWidth="false" %}

```markup
<div data-8select-widget-id="8.SIMILAR" 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](/widgets/touchpoints.md)
* `data-sku` is a dynamic attribute
  * its value is the [SKU](/product-export/base-data/details.md#sku-sku) or [Main-SKU](/product-export/base-data/details.md#main-sku-main-sku) of the product variant the customer is viewing in the shop
  * the [SKU](/product-export/base-data/details.md#sku-sku) or [Main-SKU](/product-export/base-data/details.md#main-sku-main-sku) has to be the same value that is used in the [product export](/integration/produkt-export.md)
  * 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 8SELECT 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.SIMILAR', 'your-new-sku-here')
```