Build · Shopify

Bangun aplikasi try-on Shopify

Ringkasan singkat

Aplikasi try-on Shopify membaca gambar produk dari Admin API, mengirimkannya via POST ke Photta, melakukan polling job di background worker, lalu menyerahkan URL yang sudah selesai ke Shopify melalui productCreateMedia.

Dapatkan API key Baca endpoint try-on

Credits: 5 credits pada 2K · 6 credits pada 4K
Waktu umum: 1.5–4 min
Pemrosesan: async, polling

Setiap angka di halaman ini bersumber dari dokumentasi API Photta · diperiksa 2026-09-10

Baca foto produk dari Admin API, render try-on dengan Photta, lalu kirim kembali hasilnya sebagai media produk. Empat panggilan, tanpa perlu penanganan gambar sendiri.

RESPONSE=$(curl -s -X POST https://api.photta.app/api/v1/tryon/apparel \
  -H "Authorization: Bearer $PHOTTA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "product_type": "top",
  "product_images": [
    "https://cdn.yourstore.com/products/shirt-front.jpg"
  ],
  "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
  "product_category": "t_shirt",
  "mannequin_id": "mnk_f3a9b1",
  "pose_id": "pose_c2d4e5",
  "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
  "lock_background": true,
  "resolution": "2K",
  "aspect_ratio": "3:4",
  "body_size": "M",
  "expression": "neutral",
  "user_instruction": "Keep the collar pattern crisp and centered."
}')
ID=$(echo "$RESPONSE" | jq -r '.data.id')

const res = await fetch("https://api.photta.app/api/v1/tryon/apparel", {
  method: "POST",
  headers: { Authorization: `Bearer ${process.env.PHOTTA_API_KEY}`, "Content-Type": "application/json" },
  body: JSON.stringify({
    "product_type": "top",
    "product_images": [
      "https://cdn.yourstore.com/products/shirt-front.jpg"
    ],
    "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
    "product_category": "t_shirt",
    "mannequin_id": "mnk_f3a9b1",
    "pose_id": "pose_c2d4e5",
    "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
    "lock_background": true,
    "resolution": "2K",
    "aspect_ratio": "3:4",
    "body_size": "M",
    "expression": "neutral",
    "user_instruction": "Keep the collar pattern crisp and centered."
  }),
});
const { data } = await res.json(); // data.id, data.status

import os, requests

res = requests.post(
    "https://api.photta.app/api/v1/tryon/apparel",
    headers={"Authorization": f"Bearer {os.environ['PHOTTA_API_KEY']}"},
    json={
      "product_type": "top",
      "product_images": [
        "https://cdn.yourstore.com/products/shirt-front.jpg"
      ],
      "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
      "product_category": "t_shirt",
      "mannequin_id": "mnk_f3a9b1",
      "pose_id": "pose_c2d4e5",
      "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
      "lock_background": True,
      "resolution": "2K",
      "aspect_ratio": "3:4",
      "body_size": "M",
      "expression": "neutral",
      "user_instruction": "Keep the collar pattern crisp and centered."
    },
)
data = res.json()["data"]  # data["id"], data["status"]

Cara kerja

Dari halaman produk hingga menjadi gambar try-on

Tentukan scope aplikasi, baca foto, submit, lakukan polling di luar jalur request, lampirkan media.

Langkah 1
Tentukan scope aplikasi
Aplikasi try-on perlu membaca produk dan menulis media. Minta scope produk yang benar-benar digunakan aplikasi Anda saja—merchant membaca layar persetujuan.
Langkah 2
Dapatkan API key Photta
Satu key per environment, disimpan di konfigurasi server-side aplikasi Anda. Key ini tidak pernah dikirim ke storefront atau ke browser merchant.
Langkah 3
Baca gambar produk
Kueri produk untuk mengambil gambar pertamanya. URL tersebut bersifat publik, tepat seperti yang dibutuhkan endpoint Photta—tanpa unggah ulang, tanpa signed URL yang harus dikelola.
Langkah 4
Submit try-on
Kirim POST gambar beserta manekin dan pose. Responsnya instan dan menyertakan id generasi; belum ada yang dirender pada tahap ini.
Langkah 5
Lakukan polling di background job
Shopify mewajibkan webhook handler merespons dalam hitungan detik, sedangkan proses generasi memakan waktu lebih lama. Kirim acknowledgment, masukkan ke antrean, dan lakukan polling setiap 3 detik dari worker.
Langkah 6
Lampirkan media
Serahkan URL yang sudah selesai ke Shopify dan sistemnya akan mengunduh file tersebut secara mandiri. Simpan juga gambar di sisi Anda agar galeri tetap aman secara independen.

Empat panggilan, end to end

Request dan polling Photta diambil dari dokumentasi API; panggilan Shopify menggunakan Admin API bawaan.

// Shopify Admin GraphQL — the product's first image is your source photo
const query = `query($id: ID!) {
  product(id: $id) { title images(first: 1) { nodes { url } } }
}`;

const res = await admin.graphql(query, { variables: { id: productGid } });
const { data } = await res.json();
const productImage = data.product.images.nodes[0].url;

const res = await fetch("https://api.photta.app/api/v1/tryon/apparel", {
  method: "POST",
  headers: { Authorization: `Bearer ${process.env.PHOTTA_API_KEY}`, "Content-Type": "application/json" },
  body: JSON.stringify({
    "product_type": "top",
    "product_images": [
      "https://cdn.yourstore.com/products/shirt-front.jpg"
    ],
    "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
    "product_category": "t_shirt",
    "mannequin_id": "mnk_f3a9b1",
    "pose_id": "pose_c2d4e5",
    "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
    "lock_background": true,
    "resolution": "2K",
    "aspect_ratio": "3:4",
    "body_size": "M",
    "expression": "neutral",
    "user_instruction": "Keep the collar pattern crisp and centered."
  }),
});
const { data } = await res.json(); // data.id, data.status

async function waitFor(id) {
  for (let attempt = 0; attempt < 120; attempt++) {
    const res = await fetch(`https://api.photta.app/api/v1/tryon/apparel/${id}`, { headers: { Authorization: `Bearer ${process.env.PHOTTA_API_KEY}` } });
    const { data } = await res.json();
    if (data.status === "completed") return data.output_url;
    if (data.status === "failed") throw new Error(data.error_message ?? "generation failed");
    await new Promise((r) => setTimeout(r, 3000));
  }
  throw new Error("timed out after 6 minutes");
}

// Shopify downloads the URL itself, so hand it the Photta output_url
const mutation = `mutation($id: ID!, $media: [CreateMediaInput!]!) {
  productCreateMedia(productId: $id, media: $media) {
    mediaUserErrors { field message }
  }
}`;

await admin.graphql(mutation, {
  variables: {
    id: productGid,
    media: [{ originalSource: outputUrl, mediaContentType: "IMAGE", alt: "Virtual try-on" }],
  },
});

Pertanyaan umum developer

Pertanyaan yang sering diajukan developer Shopify

Di mana key Photta disimpan dalam aplikasi Shopify?

Di environment server aplikasi Anda, jangan pernah di theme, app block, atau respons app proxy. Apa pun yang bisa dibaca oleh storefront dapat dibaca oleh pembeli.

Scope Shopify apa saja yang dibutuhkan?

Membaca gambar produk dan menulis media produk. Photta sama sekali tidak memerlukan akses Shopify—aplikasi Anda adalah satu-satunya perantara yang berkomunikasi dengan kedua belah pihak.

Bagaimana cara menjaga webhook tetap cepat?

Kirim acknowledgment segera, masukkan pekerjaan ke antrean, lalu lakukan polling dari worker. Proses generasi memakan waktu lebih lama dari batas wajar webhook handler, jadi proses apa pun yang menunggu proses tersebut tidak boleh berada di dalam handler.

Bisakah saya menagih merchant per gambar?

Itu adalah keputusan skema harga Anda. Photta membebankan akun Anda dalam credits per panggilan, sehingga biaya per gambar sudah diketahui sebelum Anda merender; margin tambahan yang Anda kenakan terserah Anda.

Bagaimana jika suatu produk tidak memiliki foto?

Lewati produk tersebut daripada mengirim placeholder. Endpoint memerlukan foto pakaian asli, dan gambar placeholder hanya akan menghabiskan credits untuk hasil yang tidak akan dipublikasikan oleh siapa pun.

Halaman terkait

Bacaan terkait

Setiap angka di halaman ini bersumber dari dokumentasi API Photta · diperiksa 2026-09-10

Rilis aplikasinya, bukan infrastrukturnya

Panggilan Photta di halaman ini diambil langsung dari dokumentasi API. Dapatkan key dan render pertama selesai dalam hitungan menit.

Dapatkan API key Baca quickstart

Bangun aplikasi try-on Shopify

Dari halaman produk hingga menjadi gambar try-on

Tentukan scope aplikasi

Dapatkan API key Photta

Baca gambar produk

Submit try-on

Lakukan polling di background job

Lampirkan media

Empat panggilan, end to end

Pertanyaan yang sering diajukan developer Shopify

Bacaan terkait

Rilis aplikasinya, bukan infrastrukturnya