Overtry · Guide
Setup guide
Overtry puts a “Try it” button on your product pages. A shopper takes a photo of their room or of themselves and sees your product in it. This guide covers everything from your site key to WordPress and Shopify.
1. Get your site key
Sign in
Sign in at lamp.ar/login and create your company. Every company gets 20 free images a month; for more, write to hello@lamp.ar.
Add your shop
In the dashboard, under Overtry, choose “Add shop”. Enter your shop’s address (for example shop.ge: the www version is added for you). If your product photos come from another address, such as an image CDN, enter it under “Product images from”. Otherwise your shop’s own address is used.
Copy the embed code
The shop gets a key (pk_try_…) and an embed code. You can add more addresses later, such as a test site: the button only works on the addresses listed.
2. Add the button
Put the script once on the page and the button where it should appear, usually next to “Add to cart”.
<script type="module" src="https://lamp.ar/overtry.js"></script>
<overtry-button
api-key="pk_try_…"
category="furniture"
product-image="https://shop.example/images/sofa.jpg"
product-name="Sofa Milano"
dimensions="220 x 90 x 85 cm"></overtry-button>Without product-image, the button uses the page’s og:image, which most shop themes already set to the product photo.
3. Button attributes
Only api-key is required. Everything else makes the result better or changes how the button behaves.
api-key- Your shop’s key from the dashboard (pk_try_…). Required.
category- What the product is. It decides how the try-on works: see the categories below. Default: furniture.
product-image- The product photo (https). It must come from your shop’s address or an address listed under “Product images from”. Default: the page’s og:image.
product-name- The product’s name, shown in the try-on window. It also helps the result.
dimensions- The real size, for example “220 x 90 x 85 cm”. Products in a room come out at the right scale.
variants- Colours or styles of the same product, as a list: name, image and, for the swatch, color. The shopper switches between them under the result.
variants-preload- Makes every variant right after the first one, so the shopper switches colours without waiting. Off by default: only the colours the shopper opens are made.
mode="exact"- Walls and floors: draws your exact pattern on the shopper’s wall or floor instead of an AI picture. The shopper can move the corners and change the pattern size.
texture- Walls and floors in exact mode: a separate swatch image, if product-image shows a room rather than the material.
texture-width-cm- How many centimetres the texture image covers in reality, so the pattern has the right size. Defaults: wallpaper 53, wall tile 30, flooring 120, floor tile 60.
color- Paint: the colour, for example “#d8cfc4”. Paint given only as a colour uses exact mode.
choices="off"- Products in a room: skips the question of how to place the product (against the wall, sideways, in a corner) and where.
lang- ka, en, es or fr. Default: the page’s language (/ka/ in the address, or <html lang>), else English.
label- The button’s text, instead of “Try it”.
qr="off"- On a computer the window offers a QR code, so the shopper can continue on their phone. This switches it off.
qr-url- Where the QR code leads. Default: the same product page.
id- With several buttons on one page, ties the QR code to this button.
<overtry-button api-key="pk_try_…" category="apparel"
product-image="https://shop.example/images/zip-red.jpg"
variants='[
{"name": "Red", "image": "https://shop.example/images/zip-red.jpg", "color": "#7b1e2b"},
{"name": "Navy", "image": "https://shop.example/images/zip-navy.jpg", "color": "#1f2a44"}
]'></overtry-button>The button can take your shop’s look: style it from your stylesheet with overtry-button::part(button).
overtry-button::part(button) { background: #111; color: #fff; border-radius: 0; }4. Categories
Set category to one of these values. Each group works in its own way.
In the room
furniture, decor, lighting, appliance, electronics
The shopper photographs their room, then drags and turns a stand-in chair to where the product should stand. The product is placed there, at the scale dimensions gives it.
Walls and floors
wallpaper, paint, wall_tile, flooring, floor_tile
The shopper photographs a wall or a floor, and it is covered with your product. With mode="exact" the pattern is drawn exactly, and the shopper can try every colour on the same photo.
On the person
apparel, shoes, bag, hat, jewelry, eyewear, watch
The shopper takes a photo of themselves and sees the product on. The colour shown on the page starts at once; each other colour is made when the shopper opens it (all at once with variants-preload).
5. Product images
Walls and floors
A flat swatch shot straight on, cropped to the material: no white border, frame or room around it, since anything in the picture repeats. At least 800 pixels wide. Set texture-width-cm to the real width the image shows.
Clothing and accessories
The product alone, from the front, on a plain background. A photo on a model also works, but the product on its own gives the most accurate result.
Products in a room
The whole product on a plain background, nothing cut off. Add dimensions so it comes out at the right size.
Every image
JPEG, PNG or WebP, up to 10 MB, over https, from your shop’s address or an address listed under “Product images from”.
6. What counts as an image
- An image is one finished picture the shopper sees: one colour of one try-on.
- Each colour the shopper opens is one image. With variants-preload every colour is made at once: a try-on of a product with 5 colours is then 5 images.
- Walls and floors in exact mode count one image per photo, whatever colours the shopper tries on it.
- Attempts that fail are not counted.
- The allowance is monthly and starts again on the 1st (UTC). An hourly limit (2% of the monthly volume, at least 20 an hour) keeps a misused key from spending it all at once.
WordPress and WooCommerce
Add this to your child theme’s functions.php, or to a code-snippets plugin. It loads the script on product pages and puts the button before “Add to cart”, with the product’s own photo and name.
<?php
// Overtry on WooCommerce product pages
add_action('wp_head', function () {
if (is_product()) echo '<script type="module" src="https://lamp.ar/overtry.js"></script>';
});
add_action('woocommerce_single_product_summary', function () {
global $product;
$category = has_term('wallpaper', 'product_cat', $product->get_id()) ? 'wallpaper' : 'furniture';
printf(
'<overtry-button api-key="%s" category="%s" product-image="%s" product-name="%s"></overtry-button>',
'pk_try_…',
$category,
esc_url(wp_get_attachment_image_url($product->get_image_id(), 'large')),
esc_attr($product->get_name())
);
}, 25); // before "Add to cart" (30)For a single page, a Custom HTML block with the embed code is enough. Product photos in your media library come from your shop’s own address, which is allowed already; with an image CDN, add its address in the dashboard.
Shopify
In Online Store → Themes → Customize, open the product template, add a “Custom Liquid” block where the button should be (for example under the Buy buttons) and paste this.
<script type="module" src="https://lamp.ar/overtry.js"></script>
<overtry-button
api-key="pk_try_…"
category="apparel"
product-image="https:{{ product.featured_image | image_url: width: 1600 }}"
product-name="{{ product.title | escape }}"></overtry-button>Shopify serves product images from your store’s address or from cdn.shopify.com. If you see product_image_host_not_allowed, add cdn.shopify.com under “Product images from”. For a different category per product, choose it from product.type in Liquid.
For developers: events
The button sends events you can pass on to your analytics: overtry:open, overtry:result, overtry:variant and overtry:error (detail.code holds the error code).
document.addEventListener("overtry:result", (e) => {
// e.detail.category: send it to your analytics
});
document.addEventListener("overtry:error", (e) => console.warn("Overtry", e.detail.code));Troubleshooting
When something goes wrong, the shopper sees a short message, and the error code is written to the browser console (“[overtry] error: …”) and sent with the overtry:error event. Here is what each code means.
origin_not_allowed- The page’s address is not on your shop’s list. In the dashboard, add it under Overtry → your shop → Allowed addresses. https://shop.ge and https://test.shop.ge are different addresses.
product_image_host_not_allowed- The product photo comes from an address that is not allowed. Add that address (for example cdn.shop.ge) under “Product images from”.
product_image_must_be_https- The product photo’s address starts with http. Use its https address.
product_image_required- There is no product-image and the page has no og:image. Set product-image.
quota- This month’s images are used up. The button works again on the 1st; for more right away, write to hello@lamp.ar.
not_enabled- Overtry is not switched on for your company. Write to us.
site_paused- The shop is paused in the dashboard. Resume it there.
invalid_key- The key is wrong or was replaced. Copy it again from the dashboard.
rate_limited- Too many try-ons in a short time. Wait a minute; if it happens often, write to us.
unknown_category- category has a value that is not on the list above.
texture_unavailable- Exact mode could not load the texture image. Check that its address opens an image of at most 10 MB.
Need help?
Send us the product page’s address and the code you see, and we will look at it.
Write to us