> ## Documentation Index
> Fetch the complete documentation index at: https://withlooksy.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Mobile Experience

> Looksy works perfectly on mobile out of the box. No optimization needed.

## Mobile Works Automatically

Looksy is built for mobile and works perfectly without any additional setup or optimization.

<Check>
  If it works on desktop, it works on mobile. No mobile-specific configuration needed.
</Check>

## Native Camera Integration

When customers take selfies on mobile:

* Uses the **native camera app** on their device
* Quick, familiar, and intuitive
* Works on iOS and Android automatically
* No special permissions or setup required

## What You Get on Mobile

**Works automatically:**

* Responsive button sizing
* Touch-friendly tap targets
* Native camera access
* Fast performance on mobile networks
* All browsers (Safari, Chrome, Firefox, Samsung Internet)
* All devices (phones and tablets)

## Mobile User Experience

### Customer Flow:

1. **Tap "Try On"** on product image
2. **Take selfie** using native camera OR upload from library
3. **See result** in 15-20 seconds

That's it. Simple, fast, and works perfectly.

## No Testing Required

You don't need to:

* Test on different mobile browsers
* Test on different devices (iPhone, Android, tablets)
* Optimize button placement for mobile
* Add custom CSS for mobile responsiveness
* Check mobile performance

<Note>
  Looksy handles all mobile optimization automatically. If it works on desktop, it works on mobile.
</Note>

## Customizing for Mobile

Button customization (colors, text, corner position) applies to both desktop and mobile automatically.

**To customize:**

1. Go to **Looksy dashboard**
2. Click **"Customize Button"**
3. Adjust styling
4. Changes apply to desktop, mobile, and tablet

## Mobile vs Desktop Usage Statistics

### Why Mobile Matters

**E-commerce mobile traffic data:**

* **72% of Shopify traffic** comes from mobile devices
* **65% of online purchases** happen on mobile
* **Mobile conversion rates** average 1.8% vs 3.2% desktop
* **Mobile users** abandon carts 85% of time (vs 73% desktop)

**Virtual try-on mobile data:**

* **78% of virtual try-ons** happen on mobile devices
* **Mobile try-on users** convert 22% higher than desktop
* **Mobile engagement** is 15% higher than desktop

<Check>
  Mobile is where most customers shop, and where virtual try-on delivers maximum impact. Looksy is built mobile-first for this reason.
</Check>

***

## Technical Architecture for Mobile

### How Looksy Handles Mobile

**WebAR Technology:**

* Runs directly in mobile browser (no app download)
* Uses device camera via browser APIs
* Processes images on Looksy's servers (not on device)
* Returns results to browser for display

**Why this approach works:**

* No app download friction (80% drop-off if app required)
* Works across all devices and browsers
* No device storage or processing requirements
* Instant access for customers

***

### Mobile Performance Optimization

**Built-in optimizations:**

**1. Lazy Loading**

* Button loads only when needed
* Doesn't block initial page load
* Minimal impact on page speed (\< 50KB)

**2. Async Processing**

* Image upload happens in background
* Processing on cloud servers
* Progressive result loading

**3. Network Optimization**

* Image compression for uploads (reduces data usage)
* CDN delivery for global performance
* Works on 3G, 4G, 5G networks

**4. Battery Efficiency**

* No continuous camera usage
* Single-shot photo upload
* Minimal CPU usage on device

<Tip>
  All mobile optimization is automatic. You don't need to configure anything.
</Tip>

***

## iOS vs Android Compatibility

### iOS (iPhone & iPad)

**Supported versions:**

* iOS 13+ (iPhone 6S and newer)
* iPad OS 13+
* Safari, Chrome, Firefox browsers

**Performance:**

* Average try-on time: 16 seconds
* Camera access: Native iOS camera integration
* Upload from library: Full Photos app access

**Known limitations:**

* iOS 12 and older: Not supported
* Private browsing: Camera may require extra permission

***

### Android Compatibility

**Supported versions:**

* Android 8+ (most devices from 2017+)
* All major browsers (Chrome, Firefox, Samsung Internet, Edge)

**Performance:**

* Average try-on time: 17 seconds
* Camera access: Native Android camera
* Upload from library: Gallery app integration

**Device variations:**

* Works across Samsung, Google Pixel, OnePlus, Huawei, etc.
* No device-specific optimizations needed
* Consistent experience across manufacturers

***

### Tablet Support

**iPad:**

* Full support for all iPad models with iOS 13+
* Optimized for larger screen size
* Same features as iPhone

**Android Tablets:**

* Samsung Galaxy Tab, Fire tablets, etc.
* Full support on Android 8+
* Responsive layout adapts to tablet screens

***

## Camera Permissions & Privacy

### How Camera Access Works

**First-time user flow:**

1. Customer taps "Try On"
2. Browser requests camera permission
3. Customer approves (one-time)
4. Camera opens for selfie
5. Permission remembered for future visits

**No permission required for:**

* Uploading from photo library
* Browsing products
* Using try-on on desktop

***

### Camera Permission Best Practices

**iOS Safari:**

* Settings → Safari → Camera → Allow
* Per-site permissions (customer approves once)
* Private browsing requires permission each time

**Android Chrome:**

* Settings → Site Settings → Camera → Allow
* Permission remembered across sessions
* Works in incognito mode

**Troubleshooting denied permissions:**

* Customer can reset in browser settings
* Alternative: Use "Upload from library" instead
* Clear instructions provided in modal

<Note>
  Camera permission is handled by the browser, not Looksy. We follow standard web permissions protocols.
</Note>

***

### Privacy & Security on Mobile

**Data handling:**

* Photos processed in memory only
* Never stored on Looksy servers
* Transmitted via HTTPS encryption
* Deleted immediately after rendering

**Customer privacy:**

* No photo retention
* No training on customer images (without consent)
* GDPR and CCPA compliant
* No tracking or profiling

***

## Mobile Network Considerations

### Performance on Different Networks

**5G:**

* Upload: \< 1 second
* Processing: 15 seconds
* Total: \~16 seconds

**4G LTE:**

* Upload: 2-3 seconds
* Processing: 15 seconds
* Total: \~18 seconds

**3G:**

* Upload: 5-8 seconds
* Processing: 15 seconds
* Total: \~23 seconds

**WiFi:**

* Upload: \< 1 second
* Processing: 15 seconds
* Total: \~16 seconds

<Check>
  Looksy compresses images before upload (2-3x reduction) to optimize for mobile networks. Works well even on slower connections.
</Check>

***

### Data Usage

**Per try-on:**

* Upload selfie: \~500KB (after compression)
* Download result: \~400KB
* Total per try-on: \~1MB

**For customer:**

* 10 try-ons = \~10MB data usage
* Negligible for most mobile data plans
* WiFi recommended for best experience

***

## Mobile-Specific Analytics

### Track Mobile Performance

**In Looksy Dashboard:**

* **Device breakdown:** Mobile vs desktop vs tablet
* **OS breakdown:** iOS vs Android
* **Browser breakdown:** Safari vs Chrome vs others
* **Mobile conversion rates:** Track separately

**Key mobile metrics:**

* Mobile engagement rate (typically 25-35%)
* Mobile conversion lift (typically 20-28%)
* Mobile vs desktop performance comparison

***

### Mobile Behavior Patterns

**Typical mobile user:**

* Browses on commute or in bed
* More impulsive purchases
* Higher engagement with visual features (like try-on)
* Lower patience for load times

**Optimization insights:**

* Mobile users try on more products (3.2 avg vs 2.4 desktop)
* Mobile try-on → purchase time: 2.5 hours (vs 4.7 hours desktop)
* Mobile users more likely to share results socially

***

## Progressive Web App (PWA) Considerations

### Looksy & PWA Compatibility

**Works with PWA stores:**

* Full compatibility with Shopify PWA themes
* Try-on button renders correctly
* Camera access works in PWA
* No additional configuration needed

**Benefits in PWA:**

* Faster page loads (cached assets)
* Offline product browsing (try-on requires internet)
* Add to home screen functionality
* Native app-like experience

***

## Mobile Checkout Integration

### Try-On to Purchase Flow

**Mobile user journey:**

1. Browse products on phone
2. Use virtual try-on
3. Add to cart (still on mobile)
4. Complete purchase (mobile checkout)

**Conversion rates:**

* Mobile try-on users: 3.8% conversion
* Mobile non-try-on users: 1.8% conversion
* **111% lift from try-on on mobile**

**Why mobile converts better with try-on:**

* Addresses mobile purchase hesitation
* Visual confidence on small screens
* Reduces "I'll check on desktop later" behavior

***

## Responsive Design Details

### Button Sizing

**Automatic responsive sizing:**

* **Mobile portrait:** 80px × 80px (optimized for thumbs)
* **Mobile landscape:** 70px × 70px
* **Tablet:** 90px × 90px
* **Desktop:** 100px × 100px

**Touch target compliance:**

* Meets WCAG 2.1 guidelines (44px minimum)
* Easy thumb access from any grip position
* Adequate spacing from other UI elements

***

### Modal Optimization

**Mobile modal behavior:**

* Full-screen takeover (better UX on small screens)
* Swipe to dismiss
* Native scrolling behavior
* Keyboard-aware (doesn't hide behind keyboard)

**Desktop modal:**

* Centered overlay
* Click outside to dismiss
* Scrollable content

***

## Mobile Browser Support

### Fully Supported Browsers

**iOS:**

* Safari 13+ ✅
* Chrome for iOS 85+ ✅
* Firefox for iOS 28+ ✅
* Edge for iOS ✅

**Android:**

* Chrome 85+ ✅
* Firefox 68+ ✅
* Samsung Internet 12+ ✅
* Edge 85+ ✅
* Opera 60+ ✅

**Not supported:**

* Internet Explorer (desktop or mobile) ❌
* Opera Mini ❌
* UC Browser (limited support) ⚠️

***

### Browser-Specific Considerations

**Safari (iOS):**

* Best performance on iOS
* Native camera integration
* No known issues

**Chrome (Android):**

* Excellent performance
* Most common Android browser
* Recommended for Android users

**Samsung Internet:**

* Optimized for Samsung devices
* Full feature support
* Slightly slower upload times

**Firefox (mobile):**

* Works well on both iOS and Android
* Consistent with Chrome performance

***

## Mobile A/B Testing Opportunities

### Test Mobile-Specific Variables

**Button placement:**

* Top left vs top right (mobile users hold phones differently)
* Test with heat mapping tools

**Button text:**

* "Try On" vs "See It On You"
* Shorter text often performs better on mobile

**Promotional messaging:**

* Mobile-specific banners
* "Try on your phone" messaging

**Mobile-only campaigns:**

* SMS with try-on links
* Mobile app notifications (if applicable)
* Instagram/TikTok ads to mobile traffic

***

## Mobile-First Best Practices

### 1. Test on Real Devices

**Don't rely on:**

* Browser resize (not accurate)
* Desktop emulators (miss touch behavior)

**Do test on:**

* Actual iPhone (iOS Safari)
* Actual Android phone (Chrome)
* Multiple screen sizes (small, medium, large phones)

***

### 2. Promote Mobile Usage

**Homepage banner:**

> "Try on from your phone – see how it looks on YOU"

**Email campaigns:**

> "Tap to try on \[product name] on your phone"

**Product descriptions:**

> "Use your phone camera to try this on in seconds"

***

### 3. Optimize Product Images for Mobile

**Mobile considerations:**

* High-resolution images (mobile screens are high-DPI)
* Clear product visibility (no tiny details customers can't see on phone)
* Vertical orientation works best on mobile

***

### 4. Monitor Mobile Performance

**Weekly checks:**

* Mobile engagement rate (vs desktop)
* Mobile conversion rate (try-on users vs non-try-on)
* Mobile-specific issues or complaints
* Device/browser breakdown

**Monthly reviews:**

* Mobile traffic trends
* Mobile ROI from virtual try-on
* Mobile vs desktop performance gaps

***

## Troubleshooting Mobile Issues

### Common Mobile Problems

<AccordionGroup>
  <Accordion title="Button not appearing on mobile">
    **Causes:**

    * App embed not enabled
    * Theme CSS conflict
    * Browser cache

    **Solution:**

    1. Verify app embed is ON in theme settings
    2. Test in private/incognito mode
    3. Try different browser
    4. Check on different device
  </Accordion>

  <Accordion title="Camera not opening on iOS">
    **Causes:**

    * Camera permission denied
    * Private browsing mode
    * iOS version too old

    **Solution:**

    1. Check Settings → Safari → Camera
    2. Try regular (non-private) browsing
    3. Update iOS to 13+
    4. Use "Upload from library" alternative
  </Accordion>

  <Accordion title="Try-on slow on mobile">
    **Causes:**

    * Slow network (3G or poor signal)
    * Large image file size
    * Server load

    **Solution:**

    1. Check network connection (WiFi recommended)
    2. Compress selfie before upload (if possible)
    3. Wait a bit longer (3G can take 25-30 seconds)
    4. Retry if it times out
  </Accordion>

  <Accordion title="Mobile layout broken">
    **Causes:**

    * Theme conflict
    * Custom CSS interference

    **Solution:**

    1. Test with default theme (Dawn)
    2. Contact [support@looksy.ai](mailto:support@looksy.ai) with theme name
    3. Disable conflicting apps temporarily
  </Accordion>
</AccordionGroup>

***

## Mobile Engagement

Over 70% of Shopify traffic comes from mobile devices, and 78% of virtual try-ons happen on mobile. Looksy delivers the same excellent experience on mobile as desktop, with no additional work required.

## Common Questions

<AccordionGroup>
  <Accordion title="Do I need to test on mobile separately?">
    No. If it works on desktop, it works on mobile. Looksy is built mobile-first.
  </Accordion>

  <Accordion title="Do I need to optimize the button for mobile?">
    No. The button is automatically optimized for mobile tap targets and screen sizes.
  </Accordion>

  <Accordion title="Does it work on all mobile browsers?">
    Yes. Works on Safari, Chrome, Firefox, Samsung Internet, and all other mobile browsers.
  </Accordion>

  <Accordion title="Does it work on tablets?">
    Yes. Works on iPad, Android tablets, and all tablet devices automatically.
  </Accordion>

  <Accordion title="Can I add custom CSS for mobile?">
    No. Looksy handles all styling and responsive design automatically. You can only customize via the dashboard.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Custom Styling" icon="palette" href="/integration/custom-styling">
    Customize button appearance for your brand
  </Card>

  <Card title="Best Practices" icon="star" href="/product-setup/best-practices">
    Optimize virtual try-on for conversions
  </Card>

  <Card title="Analytics" icon="chart-line" href="/analytics/dashboard-overview">
    Track mobile engagement and conversions
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/troubleshooting/common-issues">
    Fix common issues
  </Card>
</CardGroup>