Skip to main content

​
Custom selectors & placement

​
productSelector

Tells the widget which image to attach the overlay button to. 
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: 
// 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: 
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: 
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: 
// Dawn theme
buyboxSelector: '.product-form__submit'

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

​
overlayAnchorSelector

Override the anchor used to position the overlay button on the image: 
overlayAnchorSelector: '.product__media-item--active'
Useful when the default image selector matches a wrapper rather than the image itself.