Skip to main content

Shoe Try-On

Elevate your e-commerce experience with DeepAR's Augmented Reality Shoe Try-On! Allow your customers to virtually try on highly realistic shoes in real-time for an enhanced shopping experience.

DeepAR combines machine vision and deep learning tracking with video game quality rendering technology to provide ultra-realistic virtual shoe try-on. Our expert team has extensively studied lightning in different environments to deliver the highest quality virtual shoe try-on experiences. DeepAR offers a wide range of asset packages that can be implemented in any browser or app to drive your AR try-on solution.

About DeepAR​

DeepAR SDK​

DeepAR’s all-in-one AR SDK is built for Web, mobile and desktop platforms. Our high-performance SDK powers hyper-realistic AR try-ons for shoes and sneakers.

DeepAR SDK can also be seamlessly integrated with popular video stacks like Amazon Interactive Video Service (AWS IVS), Agora, and Vonage.

You can learn more about DeepAR on our marketing website.

DeepAR Studio​

DeepAR Studio is a powerful AR asset creation tool within the DeepAR SDK. It allows AR creators to produce, edit and fine-tune a massive variety of effects driven by facial movements, body movements, emotions, and even hair shapes.

Impact and benefits of DeepAR’s AR Shoe Try-On Technology​

🛍️ 7 in 10 consumers agree that AR helps them shop in new and exciting ways. (Source)

🥳 81% of shoppers feel more confident in their purchase as a result of using AR. (Source)

📈 Interacting with products that have AR experiences leads to a 94% higher purchase conversion rate. (Source)

🌎 83% of consumers believe AR has the potential to help the environment by reducing returns. (Source)

  • Increase brand awareness with industry-agnostic try-on campaigns
  • Give shoppers an easy and realistic way to quickly see what your products will look like, facilitating faster purchase decisions
  • Increase conversion rate by up to 94%, and typically more than 50%
  • Reduce returns
  • Grow brand differentiation and loyalty with personalized AR shopping experiences
  • Our solutions are scalable across 50,000+ SKUs and millions of end users
  • Our technology is straightforward to integrate and manage
  • DeepAR offers a highly competitive pricing model based on usage similar to AWS and not old-school enterprise per-seat or per-platform licensing models
  • DeepAR’s try-on packages can integrate and work together so you can offer a wide variety of virtual try-on experiences to your customers

We’ve worked hard on our shoe-tracking technology to create ultra-realistic virtual shoe try-on. We work with leading footwear brands integrating our shoe try-on with thousands of high-end footwear styles.

DeepAR Shoe Try-On is compatible with any type of sneaker for seamless try-before-you-buy AR commerce.

Platform Compatibility​

AndroidiOSmacOSWeb
Coming soonComing soonComing sooncheck

Device Compatibility​

Devices starting from iOS 10.0+ / Android 6.0 or higher with a 1280x720 camera (recommended).

Demo project​

We have a demo project setup on GitHub that lets you test out DeepAR really quickly and it serves as a getting started project.

Check out the DeepAR Web shoe try-on project on GitHub!

Clone the project.

git clone https://github.com/DeepARSDK/shoetryon-web-js.git

Install DeepAR Web and Webpack with NPM.

npm install deepar
yarn add deepar

Run the demo.

npm run dev
yarn dev

If the browser doesn't open automatically, open http://localhost:8888.

Getting Started​

There are two main ways to get deepar.js in your JavaScript project: via script tags or by installing it from NPM and using a build tool like Parcel, WebPack, or Rollup.

via Script tag​

Add the following code to an HTML file:

<html>
  <head>
    <!-- Load deepar.js -->
    <script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"></script>
  </head>

  <body>
    <!-- Canvas element for AR preview -->
    <canvas width="640" height="360" id="deepar-canvas"></canvas>
    <!-- Initialize DeepAR and load AR effect/filter -->
    <script>
      (async function () {
        const deepAR = await deepar.initialize({
          licenseKey: "your_license_key_here",
          canvas: document.getElementById("deepar-canvas"),
          effect: "https://demo.deepar.ai/assets/foot/airmax",
          // set camera to front-facing
          additionalOptions: {
            cameraConfig: {
              facingMode: "environment",
            },
          },
        });
      })();
    </script>
  </body>
</html>

via NPM​

Add deepar.js to your project using yarn or npm.

Note: Because we use ES2017 syntax (such as import), this workflow assumes you are using a modern browser or a bundler/transpiler to convert your code to something older browsers understand. However, you are free to use any build tool that you prefer.

import * as deepar from "deepar";

const deepAR = await deepar.initialize({
  licenseKey: "your_license_key_here",
  canvas: document.getElementById("deepar-canvas"),
  effect: "https://demo.deepar.ai/assets/foot/airmax",
  // set camera to front-facing
  additionalOptions: {
    cameraConfig: {
      facingMode: "environment",
    },
  },
});

And that's all you need to do to create a virtual shoe try-on experience with DeepAR!

There are loads of additional options in the DeepAR SDK for customizing your AR experience. Check out the Web SDK Docs for more details.

Finally, to publish your project to the web you'll need to get a licence key from the developer portal.

DeepAR License Key​

🔥 DeepAR offers unlimited FREE licences for testing and small projects. 🔥

  1. On developer portal, go to projects and click + New Project.
  2. Enter the name of your project. For example "My First AR App".
  3. Choose a FREE plan.
  4. Under Web App choose + Add App.
  5. Enter the domain name under which you plan to deploy your app.

    ⚠️ IMPORTANT ⚠️
    You need to enter the DOMAIN NAME, not the URL where your app is running.
    For example, if your app is running on
    > https://www.domain.com/try-on/shoe
    the domain you need to enter is www.domain.com.
    Be sure to leave out any protocol name (like https) and additional paths (like try-on/shoe).