🚀Getting Started
Getting Started with TrialClouds
Get your virtual try-on solution up and running in just 5-10 minutes. This guide walks you through the complete onboarding process, from creating your account to seeing your first successful try-on.
Overview
By the end of this guide, you'll have:
✅ A TrialClouds account and dashboard access
✅ A configured site for your domain
✅ The virtual try-on widget installed on your website
✅ A working "Try On" button on your product pages
✅ Your first test try-on completed
Estimated Time: 5-10 minutes for Shopify, 15-20 minutes for manual installation
Prerequisites
Before you begin, make sure you have:
TrialClouds Account
Sign up at https://app.trialclouds.com
Free account creation with starter credits
Website or Store
Shopify store (for app installation)
OR any website where you can add HTML/JavaScript (for manual installation)
Access to edit your site's code or theme
Product Images
Model photos showing products being worn
Clear face visibility in model photos (required for AI processing)
Good lighting and high resolution (1000x1000px minimum)
AI Credits
Free credits provided on signup
1 credit = 1 completed try-on image generation
Purchase additional credits anytime from billing
The TrialClouds Onboarding Flow
After signing up, TrialClouds guides you through a simple 3-step onboarding process. This flow is designed to get you from zero to fully-functional in minutes.
Step 1: Add Your Domain
The first step is to register your website domain with TrialClouds.
What You'll Do:
Enter your website domain in the form
Configure domain matching options
Save your site configuration
Domain Format Examples:
www.yourstore.com– Exact domain matchyourstore.com– Matches without wwwyourstore.myshopify.com– Shopify storeslocalhost– For local development/testing
💡 Tip: You can always change this later in your dashboard settings.
Step 1 - Domain entry form with example domain filled in
Step 2: Choose Your Platform
TrialClouds supports two installation methods. Choose the one that fits your setup.
You'll See Two Options:
🌐 Manual Setup (Universal)
Best for: Custom websites, WooCommerce, or any platform
What you'll do: Copy script and button code, paste into your site
Skill level: Basic HTML knowledge helpful
Time: 15-20 minutes
Choose this if:
You're using WooCommerce, Magento, or a custom platform
You want full control over button placement and styling
You're comfortable editing HTML
🛍️ Shopify (App Installation)
Best for: Shopify stores (recommended)
What you'll do: Install app from Shopify App Store, enable in theme editor
Skill level: No coding required
Time: 5-10 minutes
Choose this if:
You have a Shopify store
You want the easiest, fastest setup
You prefer no-code solutions
How to Choose:
Shopify merchants: Always choose Shopify for the simplest experience
All other platforms: Choose Manual Setup
💡 Tip: You can change this selection later if needed.
Step 2 - Platform selection
Step 3: Complete Setup
This step branches based on which platform you selected in Step 2.
If You Selected: Manual Setup
You'll see two code blocks to copy and implement on your website.
3a. Install Widget Script
What You'll See: A code block containing your unique embed script:
What to Do:
Click "Copy to Clipboard" button
Open your website's template or layout file
Find the closing
</body>tagPaste the script just before
</body>Save your template file
Where to Paste:
WordPress: Appearance → Theme Editor → footer.php (before
</body>)WooCommerce: Same as WordPress
Custom HTML site: In your main layout/template file
Webflow: Project Settings → Custom Code → Footer Code
Squarespace: Settings → Advanced → Code Injection → Footer
💡 Tip: The script loads asynchronously and won't slow down your page.
3b. Add Try-On Button
What You'll See: Button HTML code with data attributes:
What to Do:
Copy this button code
Open your product page template
Paste the button HTML near your product images or "Add to Cart" button
Replace placeholder values with actual product data:
YOUR_PRODUCT_ID→ Your product IDYour Product Name→ Actual product nameProduct images, prices, etc.
Save your template
Required Attributes (button won't work without these):
data-product-id– Unique product identifierdata-product-name– Product titledata-images– JSON array of image URLsdata-link– Product page URL
💡 Important: The button MUST have the class trialclouds-trial-widget-trigger-button to function.
Dynamic Implementation: For platforms with templating engines, you'll want to dynamically populate these attributes. See our detailed Button Customization Guide for platform-specific examples.
3c. Stylize Your Button (Optional)
The button inherits your site's default button styles, but you can customize it further with CSS:
If You Selected: Shopify
You'll see a 3-part guide for Shopify app installation.
3a. Install TrialClouds App
Steps:
Go to your Shopify Admin dashboard
Navigate to Apps and sales channels
Click "Visit Shopify App Store"
Search for "TrialClouds Virtual Try-On"
Click "Add app"
Review permissions (required for widget functionality)
Click "Install app"
Alternative: Use the direct link provided in the onboarding flow.
Permissions Explained:
Read products: To display product information in widget
Read themes: To enable theme app blocks
Read customers: To optionally pre-fill customer data (if enabled)
💡 Tip: The app installation is instant and requires no configuration at this stage.
3b. Copy Your Site ID
What You'll See: A large, highlighted box containing your unique Site ID:
With a "Copy to Clipboard" button below it.
What to Do:
Click "Copy to Clipboard" button
Keep this Site ID handy – you'll paste it in the next step
💡 Important: Your Site ID is unique to your domain and is required for the widget to load. Treat it like a configuration key.
3c. Configure in Shopify Theme Editor
Now you'll enable the widget and add the button to your product pages.
Part 1: Enable App Embed (Global Widget Script)
In Shopify Admin, go to Online Store → Themes
Click "Customize" on your active theme
In the theme editor, click theme settings icon (left sidebar)
Scroll down to "App embeds" section
Find "TrialClouds Widget" in the list
Toggle it ON (enable)
Click on the widget name to open settings
Paste your Site ID in the "Site ID" field
Ensure "Enabled" checkbox is checked
The embed is now active
What this does: Loads the TrialClouds widget script on all pages of your store.
Part 2: Add Try-On Button Block
Still in theme editor, navigate to Products → Default product (or your product template)
Click "Add block" in the product template section
Scroll down to "Apps" category
Select "TrialClouds Try-On Button"
The button block appears – drag it to your desired position:
Recommended: Between product images and "Add to Cart" button
Alternative: After product title, below "Add to Cart", in sticky bar
Click the button block to open settings panel (right sidebar)
Part 3: Customize Button (Optional)
In the button block settings panel, you can customize:
Enabled: Toggle button on/off without removing block
Button Text: Default "Try On 👗", supports emojis
Button Color: Background color picker
Text Color: Text color picker
Button Size: Small / Medium / Large dropdown
Show on Desktop: Checkbox (recommended: checked)
Show on Mobile: Checkbox (recommended: checked)
Capture Customer Data: Checkbox to auto-send logged-in customer info
💡 Tip: Changes preview in real-time. Experiment to match your brand.
Part 4: Save & Publish
Click "Save" button (top right)
Changes are now live on your store
Click "Exit" to return to dashboard
Verification:
Visit one of your product pages
You should see the "Try On" button
Click it to verify the widget loads
Verification
After completing Step 3, TrialClouds will check if your widget is properly installed.
How It Works:
The system checks if the widget has been loaded from your domain in the last 24 hours
Status Indicators:
✅ Success: Widget detected, installation verified
⏳ Pending: Widget not yet detected (visit your product page and click the button)
❌ Not Found: Widget script not loading (check Site ID and domain)
Manual Verification Steps:
Open Your Website: Go to a product page where you added the button
Find the Button: Locate your "Try On" button
Click the Button: The widget overlay should appear
Test Upload: Upload a clear photo with a visible face
Wait for Processing: AI takes 20-30 seconds
View Result: Try-on result should display
Check Download: If enabled, download button should work
Troubleshooting Installation: If verification fails or the widget doesn't load:
✓ Verify Site ID matches exactly (no extra spaces)
✓ Check that domain in dashboard matches your actual domain
✓ Ensure site status is "Active" in dashboard
✓ Open browser console (F12) and check for errors
✓ Verify button has class
trialclouds-trial-widget-trigger-button
Need Help? See our Installation Verification Guide or Common Issues.
Completing Onboarding
Once verification succeeds (or you skip it), you'll see a success message and be redirected to your dashboard.
You'll see:
✅ Onboarding complete
Your site listed with "Active" status
Quick links to:
View analytics
Customize settings
Add another domain
Purchase credits
Next Steps:
Test thoroughly: Click the button on multiple products, try different images
Customize appearance: Upload logo, set theme colors in Dashboard Setup
Review settings: Adjust widget behavior in site settings
Monitor analytics: Check dashboard to see engagement metrics
Purchase credits: If you run low, buy more credits from Credits section
Next Steps After Onboarding
1. Customize Your Widget
Make it match your brand:
Dashboard Setup – Upload logo, set theme color, configure settings
Button Customization – Style the button, adjust placement
Shopify Button Settings – For Shopify users
2. Understand Your Dashboard
Learn what's available:
Dashboard Overview – Navigation and features
Analytics – Track performance
Visitors – Understand customer behavior
Products – See which products perform best
3. Optimize for Success
Best practices for maximum conversions:
Button Placement – Where to position buttons
Image Quality – Product photo requirements
Conversion Optimization – Increase try-on rates
Performance – Keep your site fast
4. Monitor Usage
Keep track of your credits and billing:
Credits & Billing – Understand the credit system, purchase more
Common Questions
Q: How long does setup really take? A: Shopify app installation: 5-10 minutes. Manual installation: 15-20 minutes depending on your platform familiarity.
Q: Do I need coding skills? A: Not for Shopify app installation. For manual setup, basic HTML knowledge is helpful but our examples are copy-paste ready.
Q: Can I test before customers see it? A: Yes! Create a site with your staging/development domain, or deactivate your site in dashboard after testing.
Q: What if I make a mistake? A: No problem! You can edit your site configuration anytime from the dashboard, re-copy embed codes, or start over with a new site.
Q: How many products can I add try-on to? A: Unlimited! Once the script is installed, just add buttons to as many product pages as you want.
Q: Will this slow down my website? A: No. The script loads asynchronously (non-blocking) and the widget only loads when the button is clicked. Minimal impact on page speed.
Getting Help
Stuck during onboarding?
Check our Troubleshooting Guide
Review Installation Verification
Browse FAQs
Email support: [email protected]
Ready to dive deeper? Explore our complete documentation:
Installation Guides
Configuration Options
User Guide
API Reference
🎉 Congratulations! You're now ready to provide virtual try-on experiences to your customers. Watch your conversions grow and returns decrease!
Need help? Email us at [email protected]
Last updated