How to add product photos and 3D models
In a TeleportHQ store, you add photos to a product from the Product Images section of the product form: drop pictures from your computer onto it, or click Add Image to upload a file, reuse an image from your project, or pick a free Unsplash photo. The first photo is the main image; Make Main changes it. Click Save Changes to keep new photos. Under 3D Model, you can also add a .glb model that shoppers can rotate.
Before you start
- Photos can be PNG, JPG, JPEG, GIF, SVG or WEBP files, up to 5 MB each.
- 3D models must be
.glbfiles, up to 30 MB. Uploading your own.glbneeds an active trial or paid plan. Anyone can pick a free model from the 3D library tabs.
Add product photos
- In the editor's left sidebar, click E-commerce (the card icon). The E-Commerce panel opens.
- In the Products list, click the product, or click + (Add Product) to create one.
- In Product Images, click the Add Image tile. The Add Image window opens.
- Choose where the photo comes from:
- Upload: drag a file onto "Click or drag image here", or click to browse.
- Project Assets: search your project's images and click Use Image.
- Unsplash: search free photos, for example
bread, and click Use Image.
- Repeat to add more photos. You can also drag several pictures from your computer straight onto Product Images: "Drop to add the pictures" appears, and they're added after the ones already there.
- To choose the main photo, point at a photo and click Make Main. The main photo shows a Main badge. To change the order, drag a photo by its handle.
- Click Save Changes (or Create Product for a new product).
Uploaded photos are also added to your project's assets, so you can use them elsewhere on your site.
Remove a photo
- Point at the photo and click the trash icon (Remove image).
- In the Remove Product Image window, click Remove Image.
On a saved product, the removal is saved right away. The photo stays in your project's assets.
Add a 3D model
- In the product form, find 3D Model. If the section is folded, click Show 3D model.
- Click Add 3D model. The Add 3D Model window opens.
- Choose where the model comes from:
- Upload: drag a
.glbfile onto "Click or drag a .glb file here". - Project Assets: pick a model already in your project and click Use Model.
- A free library tab: Poly Haven, Smithsonian, Game or Polygonal Mind. Click a model to add it. (The Poly Pizza tab is marked as coming soon.)
- Upload: drag a
- To show the 3D model instead of the main photo, keep Show 3D model by default on. It "Replaces the main image on the products list and the product page. Shoppers can always open the model from the gallery."
On a saved product, 3D model changes are saved right away, without clicking Save Changes. The product now shows a 3D badge in the Products list. To swap the model, click Replace. To remove it, click the trash icon (Remove 3D model), then Remove Model.
Check that it worked
The product card in the Products list shows your main photo, and a 3D badge if you added a model. On the published product page, shoppers see the photo gallery and can open the 3D model.
Troubleshooting
An "Unsaved Changes" window appears when you close the product after adding photos New photos, a new main photo and a new order are saved only when you click Save Changes. Click Keep Editing, then Save Changes. Discard Changes drops the new photos from the product (uploaded files stay in your project's assets).
"Image size must be less than 5MB" Make the photo smaller (for example, resize it to 2000 pixels wide) and upload it again.
"Please upload a valid image file (PNG, JPG, JPEG, GIF, SVG, WEBP)" Convert the photo to one of those formats. HEIC photos from iPhones need converting to JPG first.
"Only pictures can be added here." You dropped a file that isn't a picture onto Product Images. Drop image files only.
"Uploading your own .glb files needs a paid plan — you can still pick a free CC0 model from one of the library tabs." Your workspace has no active trial or paid plan. Pick a model from a library tab, or subscribe to a plan.
"A .glb upload must be under 30MB. Bigger models can still be brought in from the free 3D libraries." Compress the model, or choose one from a library tab.
"Please upload a .glb file" Only .glb (binary glTF) files are accepted. Convert other 3D formats to .glb first.
Good to know
- Generate from photo next to 3D Model is marked Soon. For now, upload a
.glbfile or pick a free model. - Library models are copied into your project assets, so they count toward your storage. See Which files can I upload, and how big can they be?.
- Heavy models slow down pages. Keep 3D models as small as you can.