3D preview and AR let your customers see their personalization come to life, in real time and in their own space. This guide walks you through adding a 3D model to a product that already has Sides — and, optionally, Variants — set up in Customizable Products: from file requirements to sides, materials, and camera setup, all the way to enabling AR.
Index
1. Before you start
3D preview is a feature of the Visual Product Customizer: once a 3D model is linked to your product, your customers will see their personalization update on the model in real time, as they design.
Please note
Your 3D model must reflect the structure of your product. It needs at least one mesh dedicated to each printable side, and each mesh must use a mapping that's consistent with that side's print area.
Example: if a T-shirt is customizable on the front and on the back, the 3D model needs at least one "Front" mesh and one "Back" mesh, matching the corresponding print areas.
Technical specifications
File
- Max size: 8–10 MB
- Formats: glTF/GLB (recommended), FBX, OBJ
Modeling
- Max 150,000 triangles
- Real-world scale
- Applied transforms
- Centered model
- Max 5–6 PBR materials
Texturing
- Compressed JPG or PNG
- Max 2048×2048 per texture (512×512 for mobile)
Zakeke also offers a 3D asset optimizer to automatically optimize 3D models and improve performance.
2. Finding 3D Preview and AR in your dashboard
From the left navigation menu, go to 3D Preview and AR, then find your product in the list.
Then, open the row actions and select "+ Add 3D".
Please note
Not sure your model's mapping matches your print areas? Use Download texture reference from the same row actions to export a reference texture, and use it as a guide in your 3D software to fit the model's UV unwrap to your 2D print areas. See this guide for more details.
3. Adding a 3D model to your product
When you land on the 3D model setup, you have two choises:
- Upload your model directly from your device.
- Reuse a model you've already uploaded to the DAM.
We recommend checking the full guide on technical specifications (Section 1) before uploading.
4. If your product has variants
If your product is a simple product with no variants, you'll land directly on the model configuration page described in Section 5 — you can skip ahead.
If your product has variants, Zakeke needs to know how those variants relate to each other in terms of 3D model, colors, and materials. You'll be asked to choose one of three options:
| Option | What it means |
| All variants are identical | Same 3D model, same appearance, across every variant. You'll set up sides, model materials and design materials once, for the whole product. |
| Same model, different colors/materials | Same shape for all variants; only colors and/or materials change between them. You'll set up sides once, but configure model materials and design materials separately for each variant. |
| Different models per variant | Each variant uses its own, distinct 3D model. You'll configure sides, design mapping, model materials and design materials separately for each variant. |
5. Configuring your 3D model
Whichever path you took in Section 4, you'll land on the same page, organized in three areas:
- Sides & Design Mapping
- Model Materials
- Design Materials
5.1 Sides & Design Mapping
This is the first and only mandatory step: associate each 3D mesh of your model with its corresponding 2D print area.
- Select a side from the list (for example, Front).
- Use the positioning tools to place the design accurately on the 3D model.
If you haven't used the texture reference
You can still adjust the mapping directly from this window. Here it's possible to isolate and rotate the projection of your 3D model against the print area, which stays fixed.
Please note
You can also configure the Camera for this specific side from this same window — see Section 6 for the full walkthrough.
When you're done configuring a side, click the < icon at the top to go back to the side list and move on to the next one.
5.2 Materials
Once every side is mapped, switch to the Model Materials tab if you want to fine-tune how your 3D model looks, and to Design Materials to control how customer-added content looks on it.
Model Materials
Use this tab to adjust the colors and textures of your 3D model so it matches your product's real-world appearance. This step is optional: by default, the model keeps the appearance it had at upload.
If you selected All variants are identical in Section 4, you'll find a single material list. Otherwise, you'll get one material list per variant. Open a material to edit its parameters freely: albedo, metallic, roughness, normal, opacity, emissive, and more.
Design Materials
By default, designs use the material properties of the mesh they're applied to. Use Design Materials when you want the customization itself — anything added or uploaded by your customer — to look different from the base model. As with Model Materials, you'll find one list if all variants are identical, or one list per variant otherwise.
|
|
|
|
No Design Material applied (default behavior) The design inherits the material properties of the bottle, while its color comes from the customization. |
With Design Material applied The design uses its own material and color, allowing a different finish (e.g. matte print) while the bottle keeps its original metallic appearance. |
6. Configuring camera views
You can open the camera creation and editing modal anytime by clicking Configure camera view from any side, inside Sides & Design Mapping.
- Once inside, rotate the model into the view you want, then click Save as new camera.
- Create as many cameras as you need, and give each one a recognizable name.
- Use the buttons on each saved camera to replace or delete a view.
When you're done setting up your cameras, go back to the individual sides: you'll find a dropdown where you can choose which camera to apply to which side.
6.1. Use camera as preview image for Checkout and APIs
If a camera view is named buy_screenshot_camera, the system will automatically generate a 3D preview image when the product is added to cart.
This preview will be used in:
Design APIs responses
If you want to generate multiple previews, you can create additional camera views using the following naming convention: buy_screenshot_camera_1, buy_screenshot_camera_2, buy_screenshot_camera_3, [...]. Each camera will generate a separate preview image.
7. Saving your project
Once every side is mapped and your materials look the way you want, save your project. Your customers are now one click away from a fully interactive, true-to-life preview of their personalization.
8. Augmented Reality
If enabled, an AR button appears on your customizer's interface, letting your customers see your product in their own space, directly through their smartphone.
To set it up, add your product's real-world height in centimeters. From there, you can choose whether the product should be resizable in AR, whether to enable faster AR conversion (client-side), and whether to allow wall placement.
Please note that augmented reality works only with the most updated Android devices that support Google Play Services for AR and Apple smartphones with iOS 12.