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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.8select.io/widgets/8.similar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.