TryonAi | Shopify Plugin Integration Guide

🚀 Getting Started

This guide explains how to integrate the TryonAi Virtual Try-On Plugin into your Shopify store in just a few steps.

Prerequisites

Active Shopify store with admin access
Domain whitelisted by Textronics
Access to theme files (theme.liquid)

📦 Download Sample Integration Files

Use the working sample to integrate faster:

tdsInit.js – Authentication & Plugin Loader
Sample Shopify snippets
Custom CSS example

Click here to download the ZIP file

🧩 Integration Steps

Step 1 – Shopify Admin

Login to https://yourstore.myshopify.com/admin → Online Store → Themes → Edit Code

Step 2 – Add CDN CSS

<link rel="stylesheet" href="https://plugin.dam3d.in/tryon/v1/ui.css">
<link rel="stylesheet" href="https://plugin.dam3d.in/tryon/v1/tryonv2_shopify.css">

Step 3 – Add tdsInit.js

<script src="https://plugin.dam3d.in/tryon/v1/tdsInit.js"></script>

This initializes authentication and loads the Tryon UI.

Step 4 – Add Meta Field “tryongender”

Purpose: The tryongender metafield identifies which gender model should be used for Try-On.

How to Add the Meta Field:

Go to Settings → Metafields & Metaobjects
In the Metafields section, select Products
Click Add definition
Name your metafield tryongender
Select type: Single line text
Click Save
When adding or editing a product, set value as men or women

Tip: After creating the tryongender metafield definition, you will see this field on each product page. Fill it with men or women so the TryOnAi button shows up for that product.

⚠️ Important

Only products with the tryongender metafield filled will display the TryOnAi button.
Set value as: women for women’s clothing, men for men’s clothing.

Tip: After adding the tryongender metafield definition, you will see this field on each product page. Fill it to ensure the TryOnAi button appears for that product.

Step 5 – Add Try-On Button

Add the Try-On button wherever products are displayed (product page, collection, or featured section). The tryOnFromGarmentImage() function is available after initialization.

Demo Example (Hardcoded):

<button class="tryon-btn" 
    onclick="tryOnFromGarmentImage(
        'https://fab3d.in/cdn/shop/files/shirt_women2_1080x1920.webp?v=1762860967',
        'women'
    )">TryOnAi</button>

Shopify Dynamic Example (Recommended):

<button class="tryon-btn initTryon" 
    onclick="tryOnFromGarmentImage(
        '{{ preview_image | img_url: '1080x1920' }}', 
        '{{ product.metafields.custom.tryongender }}'
    )">
    Try On
</button>

💡 Note: The Shopify version automatically passes each product’s image and tryongender metafield. No need to hardcode values for every product.

Step 6 – Add Try-On Modal Container

Include the following container **once** in your Shopify page or theme (for example in theme.liquid or product template). This is where the Try-On plugin will render the virtual try-on UI.

<div class="tryon-frame" id="tryonModal"></div>

Welcome to TryonAi