Information

Documentation

Shopify

Magento

PrestaShop

WooCommerce

ApiRest

How to install the 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 automatically filling in your product data thanks to its variables. Let's get started! ✨

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 and click Online Store > Themes.

2. Click the three dots (...) next to your current theme and select Edit code.

3. In the search bar on the left, find the file theme.liquid and open it.

4. Scroll all the way to the bottom. Right above the </body> tag, paste this line:

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

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

Now let's place the "Try it on" button on your product page. The best thing about this

code is that it is 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 is usually called main-product.liquid, product-template.liquid, or simply a

custom block in your visual editor)

2. Paste this code wherever you want the button to appear:

<lookam-tryon
  api-key="PON_TU_API_KEY_AQUI"
  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="es"
  button-text="Try it on"
></lookam-tryon>

3. Important! Change where it says PON_TU_API_KEY_AQUI with the API key for your account with

Lookam.

4. Save the changes.

And that's it!

Go to your store, open any product, and you'll see your new "Try it On" button

When you click it, our widget will open, automatically read the product photo, and allow your

customers to see how it looks on them. That simple!

💡 Why is it so easy?

You may have noticed odd words like {{ product.title }}. Those are the superpowers of

Shopify! They make our code adapt to each product in your catalog without you having

to upload photos one by one. We'll take care of the rest.

Would you like to go one step further? (Optional)

If it's already working for you and you want your Lookam statistics dashboard to have really rich data (to see whether discounted products are being tried more, which brand, etc.), you just need to add a couple more lines to the previous code.

It's exactly the same as the previous one, but we send more information to your dashboard:

<lookam-tryon
  api-key="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: 'es' }}"
  button-text="Try it on"
></lookam-tryon>