🚀 How to install Lookam Virtual Try-On on Shopify (In 2 minutes!)

Adding our AI-powered virtual try-on to your Shopify store is as easy as copy and paste. Literally.

You don't need to be a developer or hire one. Shopify will do all the heavy lifting by filling in your product data automatically using variables. Let's get to it! ✨

🛠️ Step 1: Activate Lookam's "brain"

First, let's give your store the ability to load the try-on widget.

1. Go to your Shopify admin panel and click on Online Store > Themes.
2. Click on the three dots (...) next to your current theme and select Edit code.
3. In the search bar on the left, search for the theme.liquid file and open it.
4. Scroll all the way to the bottom. Just above the </body> tag, paste this line:

<script src="https://widget.lookam.io/tryon-widget.js" defer></script>

Save your changes and you're done! Step 1 is complete. 🎉

👕 Step 2: Place the "Magic Button" on your products

Now let's put the "Try it on" button on your product pages. The best part about this code is that it's smart: it will automatically detect the photo, name, and price of the garment the customer is looking at.

1. In the same Shopify code editor, find the file where you want the button to appear. (It's usually called main-product.liquid, product-template.liquid, or simply a custom block in your visual editor).
2. Paste this code where you want the button to appear:

<lookam-tryon
  api-key="PUT_YOUR_API_KEY_HERE"
  api-url="https://api.lookam.io"
  garments='[{
    "imageUrl": "{{ product.featured_image | image_url: width: 800 | prepend: 'https:' }}",
    "category": "clothing",
    "name": "{{ product.title | escape }}",
    "finalPrice": {{ product.price | divided_by: 100.0 }},
    "currency": "{{ cart.currency.iso_code }}"
  }]'
  mode="simple"
  locale="en"
  button-text="Try it on"
></lookam-tryon>

3. Important! Replace PUT_YOUR_API_KEY_HERE with your Lookam account's API key.
4. Save the changes.

🥂 And that's it!

Go to your store, open any product, and you will see your new "Try it on" button.

When clicked, our widget will open, read the product photo automatically, and allow your customers to see how it looks on them. It's that simple!

💡 Why is it so easy? You might have noticed weird words like {{ product.title }}. Those are Shopify's superpowers! They make our code adapt to every product in your catalog without you having to upload photos one by one. We take care of the rest.

Want to go one step further? (Optional) 📈

If it's already working for you and you want your Lookam analytics dashboard to have super juicy data (to see if discounted products are tried on more, which brand, etc.), you just need to add a couple more lines to the previous code.

<lookam-tryon
  api-key="PUT_YOUR_API_KEY_HERE"
  api-url="https://api.lookam.io"
  garments='[{
    "imageUrl": "{{ product.featured_image | image_url: width: 800 | prepend: 'https:' }}",
    "category": "{{ product.type | default: 'clothing' | downcase }}",
    "name": "{{ product.title | escape }}",
    "brand": "{{ product.vendor | escape }}",
    "originalPrice": {{ product.compare_at_price | divided_by: 100.0 | default: 0 }},
    "finalPrice": {{ product.price | divided_by: 100.0 }},
    "currency": "{{ cart.currency.iso_code }}",
    "url": "{{ shop.url }}{{ product.url }}"
  }]'
  mode="simple"
  locale="{{ request.locale.iso_code | default: 'en' }}"
  button-text="Try it on"
></lookam-tryon>