Products

How to add product photos and 3D models

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 .glb files, up to 30 MB. Uploading your own .glb needs an active trial or paid plan. Anyone can pick a free model from the 3D library tabs.

Add product photos

  1. In the editor's left sidebar, click E-commerce (the card icon). The E-Commerce panel opens.
  2. In the Products list, click the product, or click + (Add Product) to create one.
  3. In Product Images, click the Add Image tile. The Add Image window opens.
The TeleportHQ Add Image window for a product, with the Upload, Project Assets and Unsplash tabs
  1. 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.
  2. 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.
  3. 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.
  4. 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

  1. Point at the photo and click the trash icon (Remove image).
  2. 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

  1. In the product form, find 3D Model. If the section is folded, click Show 3D model.
  2. Click Add 3D model. The Add 3D Model window opens.
The 3D Model section of a TeleportHQ product, with the Add 3D model button highlighted
  1. Choose where the model comes from:
    • Upload: drag a .glb file 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.)
  2. 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 .glb file 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.
Share

Related Articles

How to add a product

To add a product to your TeleportHQ store, open the E-Commerce panel from the editor's left sidebar, click + (Add Product), fill in Product Name and Price, check the Currency and Status, and click Create Product.

How to add sizes, colors and other variants

To sell a TeleportHQ store product in sizes, colors or other variants, open the product, click Variants under More ways to sell it, add up to 3 variant options with their values, set a price, stock and SKU for each combination, and click Save Changes.

How to use free 3D models, game sprites and sounds

The TeleportHQ Assets Manager includes free 3D models (3D tab: Poly Haven, Smithsonian, Game and Polygonal Mind, with Poly Pizza coming soon), 2D game sprites (Stock tab → Game) and sound effects (Audio tab); search, then drag an item onto your page or point at it and click its add button.

How to use free stock photos and videos (Unsplash, Pexels)

In the TeleportHQ Assets Manager, open the Stock tab, choose Unsplash or Pexels, search for a subject such as "bread", and drag a photo or video onto your page; stock media is free and doesn't use your project's storage.

Which files can I upload, and how big can they be?

TeleportHQ accepts images (jpg, png, gif, svg, webp, ico), videos (mp4, m4v, mov), documents (pdf, Word, Excel, PowerPoint, zip), audio, .glb 3D models, fonts and text files; trial and Pro plans allow 10 MB per file and 1 GB per project, Premium allows 30 MB per file and 3 GB per project, and smaller files are flagged as heavy when they would slow a page down.