AI Try-On — Getting Started Guide

A step-by-step tutorial for merchants

Table of Contents

1. Installation
2. Add the Widget to Your Store
3. Configure Settings
4. Select Products
5. Test the Try-On
6. Choose Your Plan
7. Monitor Analytics
8. Advanced Setup

Step 1: Install the App

1.1 From the Shopify App Store

1. Visit the Shopify App Store and search for "AI Try-On"
2. Click "Add app"
3. Review the permissions and click "Install app"
4. You'll be redirected to your Shopify admin to authorize the app

1.2 First-Time Setup

After installation, you'll see the AI Try-On dashboard. The app automatically:

• Creates your shop record in our system
• Sets up the Free plan (30 generations/month)
• Creates default widget settings
• Registers compliance webhooks

Time required: 2 minutes

Step 2: Add the Try-On Button

The button is added via Shopify's Theme App Extension — no code editing required.

2.1 For Online Store 2.0 Themes (Dawn, Sense, Craft, etc.)

1. Go to Online Store → Themes
2. Click "Customize" on your active theme
3. Navigate to a product page using the top dropdown
4. In the left sidebar, find the section where you want the button (usually near "Buy buttons")
5. Click "Add block" → search for "AI Try-On button"
6. Click the block to add it

2.2 Position the Button

You can move the block up or down in the section by dragging it. Recommended positions:

• Below Buy Buttons — shoppers see it right after the Add to Cart
• Above Product Description — high visibility without being intrusive

2.3 Configure Block Settings

Click the "AI Try-On button" block to see settings:

Click "Save" in the top right.

2.4 For Multiple Product Templates

If you have multiple product templates (e.g., one for clothing, one for accessories):

1. Repeat Step 2.1 for each template where you want the button
2. The app will only show the button on supported products regardless

Step 3: Configure Settings

3.1 Open App Settings

In the AI Try-On app, click "Settings" in the left navigation.

3.2 Widget Appearance

Customize how the button and modal look:

Button Text:        "Try It On" (or your language)
Button Color:       #0F62FE (blue)
Text Color:         #FFFFFF (white)
Border Radius:      8px
Position:           Full width

3.3 Product Filtering

Control which products show the button:

Option A: Hide Unsupported Products

• Enable "Hide on unsupported products" to automatically hide the button for shoes, bags, jewelry, etc.

Option B: Enable by Tag

• Set a product tag (e.g., tryon-enabled) and only products with this tag will show the button

Option C: Enable by Collection

• Select a collection and only products in that collection will show the button

3.4 Privacy & Consent

Important: Fitrum includes a public privacy policy by default. Merchants should also keep their own store privacy policy updated where required by law.

3.5 Save Settings

Click "Save" at the bottom of the page.

Step 4: Select Products

4.1 Review Supported Products

Go to "Products" in the AI Try-On app.

You'll see a list of your products with indicators:

• Green checkmark — Supported (clothing item)
• Red X — Unsupported (accessory, shoe, etc.)

4.2 Enable/Disable Products

1. Check the box next to products you want to enable
2. Click "Save Selection"
3. The button will appear on enabled products within a few minutes

4.3 Bulk Actions

You can also:

• Use the search bar to find specific products
• Sort by supported/unsupported to see all at once
• Enable all supported products with one click

Tip: Start with 5-10 products for testing, then enable more as you get comfortable.

Step 5: Test the Try-On

5.1 Test on Your Storefront

1. Visit your store as a customer
2. Navigate to a product with the "Try It On" button
3. Click the button
4. Upload a clear photo of yourself (or use a test photo)
5. Wait 45-90 seconds for the AI to generate the result
6. Review the result

5.2 Test the Full Flow

Test these scenarios:

• ✅ Upload a photo and generate a try-on
• ✅ Click "Add to Cart" from the result
• ✅ Complete a test checkout (use Shopify's test mode)
• ✅ Verify the order contains _tryon_job_id property

5.3 Common Issues

Step 6: Choose Your Plan

6.1 Free Plan (Start Here)

• 30 generations/month
• Basic analytics
• Perfect for testing and small stores

6.2 Upgrade When Ready

Go to "Billing" in the app:

6.3 How to Upgrade

1. Go to Billing
2. Select your desired plan
3. Click "Subscribe"
4. You'll be redirected to Shopify's approval page
5. Approve the charge
6. Your plan is active immediately

Step 7: Monitor Analytics

7.1 Dashboard Overview

The Dashboard shows:

• Total try-ons this month
• Success rate
• Credits used/remaining
• Revenue attributed to try-ons
• Enabled products count

7.2 Product Analytics

Go to "Analytics" for detailed product-level metrics:

7.3 Understanding Attribution

• Direct Revenue: Order line item has _tryon_job_id property (shopper clicked "Add to Cart" from try-on)
• Assisted Revenue: Shopper tried on a product and bought it within 24 hours (same session)

Advanced Setup

Enable Web Pixel (Recommended)

The Web Pixel tracks checkout events for better attribution:

1. The app attempts to auto-enable the Web Pixel on install
2. If not active, go to Settings → Advanced
3. Toggle "Enable Web Pixel"
4. This allows tracking of checkout_started and checkout_completed events

Custom Domain (Optional)

If using a custom Shopify domain, ensure it's added to your app configuration in the Partner Dashboard.

Email Notifications

Set up merchant alert emails in Settings:

• Low credits warning
• Monthly usage summary
• Technical issues

Requires RESEND_API_KEY in your .env (developer setup).

Theme Customization (For Developers)

Advanced merchants can customize the widget CSS by overriding these CSS variables in their theme:

.ai-tryon-button {
  --ai-tryon-button-bg: #your-color;
  --ai-tryon-button-text: #your-color;
  --ai-tryon-radius: 12px;
}

Next Steps

• Add the button to your theme
• Enable 5-10 products
• Test with your own photo
• Upgrade to a paid plan when ready
• Share the feature with your customers via email or social media

Need Help?

• Email: [email protected]
• Support: https://fitrum.org/support
• FAQ: https://fitrum.org/faq
• Privacy Policy: https://fitrum.org/privacy-policy
• Terms of Service: https://fitrum.org/terms-of-service
• Data Processing Agreement: https://fitrum.org/dpa
• Video Tutorial: Add the Shopify walkthrough video before App Store submission

FitRum support writes only from [email protected]. Any other email or person claiming to represent FitRum support is fraudulent.

Happy selling with AI Try-On!