Bouw · Shopify

Bouw een Shopify try-on-app

In één zin

Een Shopify try-on-app leest de productafbeelding uit via de Admin API, POST deze naar Photta, pollt de taak in een background worker en levert de voltooide URL via productCreateMedia af aan Shopify.

API-sleutel ophalenLees het try-on endpoint uit
  • Credits: 5 credits bij 2K · 6 credits bij 4K
  • Typische duur: 1.5–4 min
  • Verwerking: async, polling

Elk getal op deze pagina is afkomstig uit de Photta-API-documentatie · gecontroleerd

Lees de productfoto uit via de Admin API, render de try-on met Photta en push het resultaat terug als productmedia. Vier calls, geen eigen beeldverwerking nodig.

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')

Hoe het werkt

Van een productpagina naar een try-on-afbeelding

Bepaal de app-scopes, lees de foto uit, dien in, poll buiten het request-pad en koppel de media.

  1. Stap 1

    Bepaal de app-scopes

    Een try-on-app moet producten kunnen lezen en media kunnen schrijven. Vraag alleen de product-scopes aan die je app daadwerkelijk gebruikt — merchants lezen het toestemmingsscherm.

  2. Stap 2

    Vraag een Photta API-sleutel aan

    Eén sleutel per omgeving, opgeslagen in de server-side configuratie van je app. Deze komt nooit terecht in de storefront of in de browser van de merchant.

  3. Stap 3

    Lees de productafbeelding uit

    Vraag de eerste afbeelding van het product op. Die URL is openbaar, precies wat het Photta-endpoint verwacht — geen herupload, geen onderhoud van gesigneerde URL's.

  4. Stap 4

    Dien de try-on in

    POST de afbeelding samen met een mannequin en een pose. De respons is direct en bevat de generation id; er is dan nog niets gerenderd.

  5. Stap 5

    Poll in een achtergrondtaak

    Shopify verwacht binnen enkele seconden reactie van een webhook-handler, terwijl een generatie langer duurt. Bevestig direct, plaats de taak in de wachtrij en poll elke 3 seconden vanuit de worker.

  6. Stap 6

    Koppel de media

    Geef de voltooide URL door aan Shopify; Shopify downloadt het bestand zelf. Sla de afbeelding ook aan jouw kant op, zodat de galerij onafhankelijk blijft bestaan.

De vier calls, end-to-end

Het Photta-verzoek en de poll zijn gebaseerd op de API-documentatie; de Shopify-calls zijn rechtstreeks van de Admin API.

// 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" }],
  },
});

Veelgestelde vragen van developers

Veelgestelde vragen van Shopify-ontwikkelaars

Waar sla je de Photta-sleutel op in een Shopify-app?

In de serveromgeving van je app, nooit in het thema, een app block of een app proxy response. Alles wat de storefront kan inzien, kan een shopper ook inzien.

Welke Shopify-scopes zijn hiervoor nodig?

Het lezen van de productafbeelding en het schrijven van productmedia. Photta heeft zelf geen toegang tot Shopify nodig — jouw app is het enige onderdeel dat met beide kanten communiceert.

Hoe houd ik de webhook snel?

Bevestig direct, zet het werk in de wachtrij en poll vanuit de worker. Een generatie duurt langer dan een webhook-handler open zou moeten blijven; logica die hierop wacht hoort niet thuis in de handler.

Kan ik merchants factureren per afbeelding?

Dat is je eigen prijsstrategie. Photta brengt je account credits per call in rekening, dus de kosten per afbeelding zijn vooraf bekend; wat je daar bovenop rekent, bepaal je zelf.

Wat als een product geen foto heeft?

Sla het product over in plaats van een placeholder te sturen. Het endpoint vereist een echte kledingfoto, en een placeholder kost credits voor een afbeelding die niemand publiceert.

Gerelateerde pagina's

Gerelateerde artikelen

Elk getal op deze pagina is afkomstig uit de Photta-API-documentatie · gecontroleerd

Lever de app op, niet het leidingwerk

De Photta-calls op deze pagina komen rechtstreeks uit de API-documentatie. Vraag een sleutel aan en de eerste render is binnen enkele minuten gereed.

API-sleutel ophalenLees de snelstartgids