For Shopify stores
Shopify diamond painting preview: add photo-to-canvas preview before checkout
A Shopify store that sells custom diamond paintings should show the customer a preview before the order is placed. The preview needs three things: the uploaded photo, sellable canvas variants and a reliable way to write the selected size back to the cart.
The checkout problem
Most custom diamond painting product pages ask for a photo upload and a size choice, but they do not prove whether that size is good enough. That creates avoidable support: customers choose 30x40 cm for a busy portrait, expect sharp eyes and hair, then receive a canvas that can never hold that detail.
A better flow shows a preview, recommends a size and stores the selected result as cart/order metadata. Your fulfillment team then sees the exact preview URL, selected variant and drill type.
Recommended Shopify flow
- Customer uploads a photo on the product page.
- Your app sends the file and sellable variants to PicDP.
- PicDP returns a preview, quality score and recommended variant.
- The storefront shows the recommended size first, but still lets the customer choose another available size.
- The selected variant, preview URL and job ID are written to line item properties before add-to-cart.
Variant mapping matters more than a pretty preview
The preview has to map back to real Shopify variants. If your store sells 30x40, 40x50, 50x70 and 60x80 cm, the API should only recommend those sizes. That prevents a common bug: the preview says 45x60 cm while the customer can only buy 40x50 or 50x70 cm.
The existing PicDP contract supports `allowed_sizes` with Shopify variant IDs. Use that instead of hardcoding a generic size chart in the theme.
What to store in the Shopify order
| Key | Why it matters |
|---|---|
_picdp_preview_url | Support and production can inspect the generated preview. |
_picdp_job_id | Lets your backend reconcile async jobs and webhook updates. |
_picdp_selected_variant_id | Confirms which sellable size the recommendation resolved to. |
_picdp_quality_score | Useful for support when a customer overrides the recommended size. |
Where this fits in the funnel
For consumers, the preview should sit inside the product page rather than behind an account flow. For store owners, the implementation starts with the API documentation and then moves to a dev store.
If you want a live example of the commercial path this should support, use the owned shop route DiamondPaintingWinkel.nl. The converter is the proof layer; the shop is where the custom order should eventually convert.
Implementation shortcut
Start with the backend adapter in the Shopify quickstart. Keep API keys server-side, pass only the preview state back to the theme and write the final preview metadata to the line item before checkout.
For access, pricing or partner setup, use the B2B contact route.