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

# Virtual Try-On

> Add AI-powered virtual try-on to your Shopify store

Genlook Virtual Try-On lets shoppers see exactly how your clothing will look on them before they buy. Customers simply upload a photo, and our AI generates a highly realistic try-on image in seconds. Because it's a native Shopify app, you can install it, add the widget to your theme, and go live in minutes.

## Getting Started

<Steps>
  <Step title="Install the app">
    Install Genlook from the [Shopify App Store](https://apps.shopify.com/genlook-virtual-try-on). Review the required permissions and click **Install app**.
  </Step>

  <Step title="Add the widget to your theme">
    In your Shopify admin, navigate to **Online Store > Themes** and click **Customize**. Select a product page template, click **Add block**, and choose **Genlook Virtual Try-On**. We recommend positioning it near the "Add to cart" button.

    <Warning>
      Make sure you're editing a **product page** template, not a collection or homepage template.
    </Warning>
  </Step>

  <Step title="Enable products or collections">
    Inside the Genlook admin panel, head over to **Products** or **Collections** and enable the items you want. Enabling a collection will automatically apply the widget to all products within it.

    <Tip>
      Start with a single collection or a handful of best-sellers to test things out, then expand once you're happy with the results.
    </Tip>
  </Step>

  <Step title="Test and launch">
    Visit one of the enabled product pages on your live store. Click the try-on button, upload a quick photo, and verify the result. Once you're satisfied, publish your theme changes!
  </Step>
</Steps>

<Note>
  No coding required. The default widget works right out of the box with any modern Shopify theme. Most merchants are up and running in under 10 minutes.
</Note>

That's it—you're live! Check out the [Widget Setup & Customization](/virtual-tryon/widget-setup) guide to learn how to adjust button colors, sizing, email collection, and more directly from the Genlook admin.

## How It Works

1. **Customer uploads a photo** — either by snapping a quick selfie or choosing an existing picture from their camera roll.
2. **AI generates a try-on** — seamlessly blending the customer's photo with your product imagery.
3. **Customer sees the result** — a realistic, high-quality visualization delivered in seconds.
4. **Share and convert** — customers can easily share their new look with friends or confidently proceed to checkout.

## Common Questions

<AccordionGroup>
  <Accordion title="Which products work best?">
    Genlook shines with upper and full-body apparel like shirts, dresses, jackets, and tops. For the most realistic generations, clear, front-facing product photography works best.
  </Accordion>

  <Accordion title="Will this slow down my store?">
    Not at all. The widget loads asynchronously and only activates when a customer actively clicks the try-on button, ensuring zero impact on your page load speeds.
  </Accordion>

  <Accordion title="Does it work on mobile?">
    Yes! Customers can use their phone's camera to take photos directly within the widget, making for a seamless mobile shopping experience.
  </Accordion>

  <Accordion title="How much does it cost?">
    Genlook offers flexible pricing plans based on your monthly generation volume, starting with a free trial so you can see the value firsthand. Check out our [Shopify App Store listing](https://apps.shopify.com/genlook-virtual-try-on) for current pricing.
  </Accordion>
</AccordionGroup>

***

## Advanced: Custom Integrations

<Info>
  Most merchants will never need this section. The options below are intended for developers who want to customize the try-on experience far beyond what the default widget offers.
</Info>

If you have a developer on your team and require fine-grained control, Genlook supports two advanced integration approaches:

<CardGroup cols={2}>
  <Card title="Custom Button" icon="code" href="/virtual-tryon/custom-button">
    Use your own bespoke button design while relying on Genlook's built-in try-on modal. One line of JavaScript — `Genlook.cabin.open()` — is all it takes.
  </Card>

  <Card title="Fully Custom UI" icon="terminal" href="/virtual-tryon/custom-flow">
    Build a completely custom try-on interface from scratch using Genlook's backend endpoints. Total flexibility for unique user experiences.
  </Card>
</CardGroup>