> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wearo.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom selectors & placement

> Control which product image Wearo targets and where the button appears.

# Custom selectors & placement

## productSelector

Tells the widget which image to attach the overlay button to.

```javascript theme={"dark"}
TryOnWidget.init({
  apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
  productSelector: '.my-product-image'
});
```

**Default selector (tried in order):**

```
img[data-product-image],
img.product-image,
.product-image img,
.product__image img,
.product__media img,
.woocommerce-product-gallery__image img
```

**Platform examples:**

```javascript theme={"dark"}
// Shopify (Dawn, Sense, Refresh)
productSelector: '.product__media img, .product-featured-media img'

// WooCommerce
productSelector: '.woocommerce-product-gallery__image img'

// Generic — any Shopify CDN image
productSelector: 'img[src*="cdn.shopify.com/s/files/"]'
```

**How to find your selector:** right-click the product image → Inspect → copy the `class` or `id` of the `<img>` or its parent.

The widget skips images smaller than 150px wide to avoid injecting on thumbnails.

## triggerSelector

Places the overlay button inside a specific container instead of next to the image:

```javascript theme={"dark"}
TryOnWidget.init({
  apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
  triggerSelector: '#try-on-button-container'
});
```

The container must exist in the DOM at init time.

## buyboxSelector

When using `injectionMode: 'buybox'` or `'both'`, this targets the anchor element near the Add to Cart button:

```javascript theme={"dark"}
TryOnWidget.init({
  apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
  injectionMode: 'both',
  buyboxSelector: 'form[action*="/cart/add"] button[type="submit"]',
  buyboxPosition: 'before',  // 'before' | 'after' | 'prepend' | 'append'
});
```

**Shopify ATC selector examples:**

```javascript theme={"dark"}
// Dawn theme
buyboxSelector: '.product-form__submit'

// Generic
buyboxSelector: 'button[name="add"]'
```

## overlayAnchorSelector

Override the anchor used to position the overlay button on the image:

```javascript theme={"dark"}
overlayAnchorSelector: '.product__media-item--active'
```

Useful when the default image selector matches a wrapper rather than the image itself.