Shopify App Installation
The easiest way to add TrialClouds Virtual Try-On to your Shopify store. This method requires no coding and takes just 5-10 minutes to complete.
Best for: Shopify stores (recommended method) Time required: 5-10 minutes Skill level: No coding required Alternative: Shopify Manual Setup for advanced customization
Why Choose App Installation?
✅ No code required: Install and configure entirely from Shopify Admin ✅ Automatic updates: Get new features automatically ✅ Theme Editor integration: Configure with visual interface ✅ Easy customization: Built-in settings for colors, text, and behavior ✅ One-click uninstall: Clean removal if needed
Prerequisites
Before you begin:
✅ Shopify Store: Online Store 2.0 compatible theme (most modern themes)
✅ TrialClouds Account: Sign up at https://app.trialclouds.com
✅ Admin Access: Ability to install apps and edit theme
✅ Product Photos: Model photos with clear face visibility
Installation Steps
Step 1: Install TrialClouds App
1.1 Find the App
Option A: From Shopify Admin
Login to your Shopify Admin
Go to Apps and sales channels (left sidebar)
Click "Visit Shopify App Store"
Search for "TrialClouds Virtual Try-On"
Click on the app
Option B: Direct Link
Visit the app listing directly: TrialClouds on Shopify App Store
1.2 Install the App
On the app page, click "Add app"
Review the permissions requested:
Read products: To display product info in widget
Read themes: To enable theme app blocks
Read customers (optional): Pre-fill customer data if enabled
Click "Install app"
Wait a few seconds for installation to complete
✅ Success! The app is now installed in your Shopify store.
[Screenshot Placeholder: Shopify App Store page showing TrialClouds app with "Add app" button]
Step 2: Get Your Site ID
After installing the app, you need to configure it with your TrialClouds Site ID.
2.1 Complete TrialClouds Onboarding
Login with your TrialClouds account
If you haven't completed onboarding:
Enter your Shopify domain (e.g.,
yourstore.myshopify.com)Select "Shopify" as your platform
Follow the instructions to get your Site ID
2.2 Find Your Site ID
Your Site ID will be displayed prominently in a large box:
cmkozmnbi00012euxrl81rx69How to Copy:
Click the "Copy to Clipboard" button below the Site ID
Or manually select and copy the text
💡 Important: Keep this Site ID handy – you'll paste it into Shopify theme settings in the next step.
[Screenshot Placeholder: TrialClouds dashboard showing Site ID in highlighted box with copy button]
Step 3: Enable App Embed (Widget Script)
The app embed loads the TrialClouds widget script globally on your store.
3.1 Open Theme Customizer
In Shopify Admin, go to Online Store → Themes
Find your active (current) theme
Click "Customize" button
The theme editor opens
[Screenshot Placeholder: Shopify Themes page showing active theme with Customize button]
3.2 Access App Embeds
In the theme editor, look at the left sidebar
Click the theme settings icon (usually at bottom or top of sidebar)
Scroll down to the "App embeds" section
You'll see a list of installed apps
[Screenshot Placeholder: Theme editor left sidebar with theme settings icon highlighted]
3.3 Enable TrialClouds Widget
Find "TrialClouds Widget" in the app embeds list
Toggle the switch to ON (enable it)
Click on "TrialClouds Widget" to expand settings
You'll see a "Site ID" input field
Paste your Site ID (from Step 2) into this field
Verify the "Enabled" checkbox is checked
What this does: Loads the TrialClouds widget JavaScript on all pages, so the try-on functionality is available store-wide.
💡 Tip: Don't click "Save" yet – we'll add the button block first, then save everything together.
[Screenshot Placeholder: App embeds section showing TrialClouds Widget toggled on with Site ID field filled in]
Step 4: Add Try-On Button Block
Now that the widget script is loaded, add the Try-On button to your product pages.
4.1 Navigate to Product Template
Still in the theme customizer, look at the top center dropdown
Click "Home" or current template dropdown
Navigate to Products → Default product
This opens your main product page template
[Screenshot Placeholder: Theme editor navigation dropdown showing Products → Default product selection]
4.2 Add the Button Block
In the product template, find the sections panel (left sidebar)
You'll see sections like "Product information", "Image gallery", etc.
Look for "Add block" or "+" button (usually in the product information section)
Click "Add block"
A menu appears with available blocks
Scroll down to the "Apps" category
Find and select "TrialClouds Try-On Button"
💡 Tip: If you don't see the button block, make sure the app is properly installed (Step 1).
[Screenshot Placeholder: Add block menu showing Apps section with TrialClouds Try-On Button option]
4.3 Position the Button
Once added, the button block appears in your template:
Drag the block to your desired position:
Recommended: Between product images and "Add to Cart" button
Alternative: After product title
Alternative: Below "Add to Cart" button
Alternative: In a sticky buy bar (if your theme has one)
The button will display in the preview panel (center/right)
Best Placement: Position where customers naturally look after viewing product images – just before or after the "Add to Cart" button.
[Screenshot Placeholder: Product template showing draggable TrialClouds button block positioned between image and Add to Cart]
Step 5: Customize Button Appearance (Optional)
Click on the TrialClouds button block to see customization options in the right sidebar.
5.1 Available Settings
Enabled: Toggle to show/hide button without removing block
Button Text: Default: "Try On 👗" — customize (supports emojis)
Button Color: Color picker for background color
Text Color: Color picker for button text
Button Size: Small / Medium (recommended) / Large
Show on Desktop: Checkbox to display on desktop (recommended: checked)
Show on Mobile: Checkbox to display on mobile (recommended: checked)
Capture Customer Data: When enabled, logged-in customer info (name, email, customer ID) is automatically sent to widget (recommended: enabled)
[Screenshot Placeholder: Button block settings panel showing all customization options]
5.2 Design Tips
Color Contrast: Use high contrast between button and text colors (Tool: WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/)
Button Size: Small for minimal, Medium for most, Large for emphasis
Mobile Considerations: Ensure button is large enough to tap (44px minimum recommended)
Matching Your Brand: Use your brand's primary or accent color and maintain consistency
5.3 Real-Time Preview
As you make changes in the settings panel, the preview updates instantly. Test on different product pages using the preview dropdown.
💡 Tip: Click on different products in the preview to see how the button looks across your catalog.
Step 6: Save and Publish
6.1 Save Your Changes
Click the "Save" button in the top right corner of the theme editor
Wait for "Saved" confirmation
All your changes (app embed + button block + customizations) are now applied
6.2 Exit Theme Editor
Click "Exit" or the X icon to leave the customizer
You're returned to the Themes page
Changes are now live on your store
✅ Success! Your virtual try-on is now active on your Shopify store!
Step 7: Test Your Installation
7.1 Visit Your Store
Open your store in a new tab (click "View your store" in Shopify Admin)
Navigate to any product page where you added the button
Look for your "Try On" button
7.2 Test the Button
Click the "Try On" button
The TrialClouds widget should open in an overlay
If the widget doesn't open, see Troubleshooting below
7.3 Complete Test Try-On
In the widget, click "Upload Photo" or drag and drop an image
Choose a clear photo with a visible face
Wait for AI processing (typically 20-30 seconds)
View the try-on result
Test the download button (if enabled in settings)
Close the widget
✅ Perfect! If all steps work, your installation is complete and functional.
7.4 Mobile Testing
Open your store on a mobile device (or use browser DevTools responsive mode)
Navigate to a product page
Tap the "Try On" button
Test uploading from photo library or camera
Verify widget displays correctly on small screens
7.5 Multiple Products
Test on several different product pages to ensure:
Button appears consistently
Product data is passed correctly (check product name in widget)
Different product images load properly
Troubleshooting
Use the expandable sections below to troubleshoot common issues.
Button Block Not Available
Problem: Can't find TrialClouds button in "Add block" menu
Solutions:
✓ Verify app is installed (Shopify Admin → Apps)
✓ Refresh theme editor (close and reopen)
✓ Check theme compatibility (must be Online Store 2.0)
✓ Update theme to latest version
Widget Doesn't Open
Problem: Clicking button does nothing
Solutions:
✓ Verify app embed is enabled and Site ID is correct
✓ Check browser console for errors (F12 → Console)
✓ Ensure site status is "Active" in TrialClouds dashboard
✓ Clear browser cache and retry
✓ Test in incognito/private browsing mode
Wrong Product Shows in Widget
Problem: Widget opens but shows incorrect product info
Solutions:
✓ Verify button block is in product template (not homepage or collection)
✓ Check that you're testing on an actual product page
✓ Clear widget cache: Close widget, refresh page, try again
Button Not Visible on Mobile
Problem: Button appears on desktop but not mobile
Solutions:
✓ Check "Show on Mobile" setting is enabled in block settings
✓ Verify no CSS is hiding the button on mobile
✓ Test on actual device (not just browser responsive mode)
✓ Check if theme has mobile-specific layout hiding the block
Site ID Error
Problem: "Invalid Site ID" error in theme editor or widget
Solutions:
✓ Copy Site ID again from TrialClouds dashboard (avoid typos)
✓ Ensure no extra spaces before/after Site ID
✓ Verify Site ID is from the correct site (if you have multiple)
✓ Check that domain in TrialClouds dashboard matches your Shopify domain
Theme Compatibility
Problem: Theme doesn't support app blocks
Solution:
Use Shopify Manual Setup instead
Or update to a modern theme (Online Store 2.0)
Contact theme developer for app block support
If you're still having issues:
Check Common Issues guide
Review Installation Verification
Email support: [email protected] with:
Your Shopify domain
Site ID
Screenshots of the issue
Browser console errors (if any)
Next Steps
🎉 Congratulations! Your Shopify store now has virtual try-on. Here's what to do next:
Customize Your Experience
Managing Site – Upload logo, set theme color
Shopify Button Settings – Advanced button options
Optimize Placement
Button Placement – Best practices for positioning
Experiment with different positions in theme editor
Improve Product Images
Image Quality – Model photo requirements
Ensure all products have clear, well-lit model photos
Increase Conversions
Conversion Optimization – Tips to boost engagement
Add "Try On" call-to-action in product descriptions
Advanced: Multiple Buttons
Want try-on buttons in multiple locations on the same product page?
In theme editor, add the TrialClouds Try-On Button block multiple times
Position each block where needed:
One near product images (top)
One after product description (middle)
One in sticky bar (bottom on mobile)
Customize each button differently (optional):
Different text ("Quick Try-On", "See It On You", etc.)
Different sizes (small, medium, large)
Different colors
All buttons trigger the same widget with the same product data – no conflicts!
Updating the App
Shopify automatically updates the app (usually)
Check Apps and sales channels for update notifications
Click "Update" if prompted
No code changes needed – button blocks remain intact
💡 Tip: Subscribe to TrialClouds emails for update announcements and new features.
Uninstalling (If Needed)
Go to Shopify Admin → Apps and sales channels
Find TrialClouds Virtual Try-On
Click the three dots (⋯) menu
Select "Uninstall"
Confirm uninstallation
The app, embed, and button blocks are removed automatically.
Data: Uninstalling removes the app from Shopify but doesn't delete your TrialClouds account or analytics data. Login to https://app.trialclouds.com to manage your account.
Comparing Installation Methods
Code required
❌ No
✅ Yes (basic HTML)
Setup time
5-10 minutes
15-20 minutes
Theme Editor integration
✅ Yes
❌ No
Visual button customization
✅ Yes
Requires CSS
Automatic updates
✅ Yes
Manual
Multiple button positions
✅ Easy (drag & drop)
Requires code edits
Full control over styling
Limited
✅ Complete
Works with all themes
Online Store 2.0 only
✅ All themes
Recommendation: Use app installation unless you need complete styling control or have an older theme.
Need help? Contact us at [email protected]
Prefer manual installation? See Shopify Manual Setup guide.
Last updated