Embed Tryona Widget on Your Shop Page with one line

1. Register panel & set limits

2. Get API key & configure domains

In the dashboard, open API Keys, copy your Public API Key . You can limit access to your shop domain or specific domains using Allowed Domains. Tryona: Panel Settings

3. Add the script to your page

For example on your page with garment images.

Just put this code at the end of body tag:


            ...
            <script async data-tryon-integration="true" 
                src="https://api.tryona.com/integrate.js?apikey=[apiKey]&selectors=[imageSelector]&lang=en">
            </script>
        </body>

Replace [apiKey] with your Public API Key from API Keys section in Tryona dashboard.

Replace [imageSelector] with CSS selector for product images on your shop page, e.g. .product-image img or .product-card img.

Replace [lang] with your language code, e.g. en for English.

The script will automatically add a "Try On" button on each product image matching the selector.

When users click the "Try On" button, the Tryona widget will open, allowing them to virtually try on the selected garment using their selfie or a model from our library.

Optional parameters:

debug=true - for debugging
hideSearch=1 - hide garments search
hideIntro=1 - hide the intro instructions
hideLinks=1 - hide link to garment page button
hideText=1 - hide all text captions, including garment description and seller caption
buttonText=[Text] - custom try-on button text

Example:

Your site code


<div class="tryon-demo-container">
   <div class="tryon-img">
       <img
            src="https://tryona.com/img/flat-garment-2.jpg"
            alt="Sample Shirt"
        />
   </div>
   <div class="tryon-img">
       <img
            src="https://api.tryona.com/v1/garment/image/01992e7f-d8d5-70bb-9fbf-906bee33a35c?height=1200"
            alt="Sample Pants"
        />
   </div>
</div>
 <!-- add integration code to your page before closing body tag -->
    <script async data-tryon-integration="true" 
        src="https://api.tryona.com/integrate.js?apikey=[public apiKey]&selectors=.tryon-img img&lang=en">
    </script>
</body>

And there you go! Your site is ready for try-ons!

TRYONA: Virtual Try-Ons

Embed Tryona Widget on Your Shop Page with one line

1. Register panel & set limits

2. Get API key & configure domains

3. Add the script to your page

Example: