Skip to content

Shopify Shoes Try-On App

Native Shopify integration for shoe stores — virtual try-on without leaving Shopify.

What It Does

Shopify merchants can offer AR shoe try-on to their customers without: - Creating a separate WEARFITS account - Writing any code - Managing 3D models manually

Everything is managed from the Shopify Admin interface.

How It Works

sequenceDiagram
    participant Merchant as Shopify Merchant
    participant ShopApp as WEARFITS App
    participant API as api.wearfits.com
    participant TryOn as dev.wearfits.com

    Merchant->>ShopApp: Install app
    ShopApp->>Merchant: Onboarding wizard
    Merchant->>ShopApp: Select shoe categories
    ShopApp->>API: Generate 3D models (shoe3d)
    API-->>ShopApp: 3D models ready
    ShopApp->>TryOn: Enable try-on for products
    Note over Merchant: Shoppers see "Try On" button
    Note over TryOn: AR try-on via dev.wearfits.com/tryon

Key Features

  • Onboarding wizard — guides merchants through setup
  • Auto 3D generation — product photos are automatically converted to 3D models via 2D→3D Generator
  • Storefront integration — "Try On" button on product pages
  • Admin extensions — manage try-on from Shopify Admin product pages
  • QR code flow — desktop shoppers scan QR to try on via phone
  • Billing — via Shopify's native billing system

Service Dependencies

Service Used for
api.wearfits.com (shoe3d) 3D model generation from product photos
dev.wearfits.com (/tryon) AR try-on viewer for shoppers

Billing Plans

Billing is managed through Shopify Managed Pricing — Shopify handles payments, subscriptions, and trials.

Plan Product Limit Price
Bronze 10 products $49/month
Silver 100 products $99/month
Gold 250 products $199/month

Architecture

The app consists of three Shopify surfaces:

  1. App Home — main web app embedded in Shopify Admin (React Router v7, Prisma, PostgreSQL, hosted on Vercel)
  2. Admin Extensions — panels on product pages in Shopify Admin (Preact, Shopify UI Extensions)
  3. Theme Extension — "Try On" button injected into the storefront (Liquid + vanilla JS)

Data flows via Shopify metafields — App Home writes them, Theme Extension reads them.

Metafield Purpose
product.wearfits.enabled Toggle try-on visibility per product
product.wearfits.tryon_url AR viewer URL for the product
shop.wearfits.global_enabled Master toggle for entire storefront
shop.wearfits.button_config Button style/position configuration

Further Reading