Skip to main content

3D Models & STL Products

TabletopForge is built from the ground up for digital hobbyists and print-on-demand stores. It supports interactive 3D orbit viewers on product pages and a unique split-checkout that lets you sell both physical resin miniatures and downloadable STL files from a single product listing.

1. Interactive 3D Orbit Viewer​

How It Works​

When a product has a .glb 3D model file attached to its media, TabletopForge automatically renders an Interactive 3D Orbit Viewer inside the product page media gallery. Customers can:

  • Rotate the model 360° by dragging
  • Zoom in and out with scroll/pinch
  • Auto-rotate on load for a captivating first impression

The viewer uses the native Shopify <model-viewer> component (Google's open-source web component), which is hardware-accelerated and works on all modern browsers and mobile devices.

Supported File Format​

Always use .glb (GL Transmission Format Binary):

  • Textures must be embedded inside the .glb container (not external files).
  • Keep polygon count under 50,000 for smooth mobile performance.
  • Recommended maximum file size: 15 MB.

:::warning Avoid .gltf separate files If you use .gltf with separate texture files, the viewer will not load the textures correctly on Shopify. Always export as a single self-contained .glb. :::

Uploading a 3D Model to a Product​

  1. Log in to your Shopify Admin and go to Products.
  2. Open the product you want to configure.
  3. In the Media section, click Add media and upload your .glb file.
  4. Shopify will process the model and display a 3D preview thumbnail.
  5. The <model-viewer> component will automatically activate on the product page.

:::tip Positioning the 3D model To make the 3D viewer the primary media shown on page load, drag the .glb thumbnail to the first position in the product media row. :::

Initialize Inspection Button​

On the product page, a "INITIALIZE INSPECTION" HUD button overlays the main media viewer. Clicking it switches from the static product image to the full interactive 3D orbit view. Clicking again toggles back to the image.

2. New Arrivals Grid — Inline 3D Modals​

The TF New Arrivals section displays product cards that open a 3D inspection modal when clicked. This modal uses Three.js to render a placeholder 3D model alongside product diagnostic data (polycount, print time, scale, price).

The modal renders a representative placeholder model. To display the actual product .glb, ensure the product has a .glb model file attached as described above.

3. Selling Digital STL Files​

The stl-available Tag​

TabletopForge includes a built-in dual-checkout path. When a product has the tag stl-available, the product page renders two separate call-to-action buttons instead of a single "Add to Cart":

┌─────────────────────────────────────────┐
│         ADD PHYSICAL RESIN              │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│         ACQUIRE DIGITAL STL             │
└─────────────────────────────────────────┘
ButtonAction
ADD PHYSICAL RESINStandard Shopify add-to-cart (physical fulfillment)
ACQUIRE DIGITAL STLRoutes to the digital file delivery workflow

Setting Up Digital Delivery​

To enable STL file delivery:

  1. Install a digital delivery app (e.g., Shopify Digital Downloads or Sky Pilot).
  2. In the app, link the digital file to the product's digital variant.
  3. In Shopify Admin, open the product and add the tag stl-available in the Tags field.
  4. Save the product. The front-end will automatically switch to the dual-button layout.

:::note Digital variant setup If your product has both physical and digital variants, set up the product with two variants — one for the physical resin kit and one for the digital STL download. Assign the stl-available tag at the product level. :::

4. Scale Comparison Display​

The product page sidebar includes a Scale Comparison Chart that visually shows the product's height relative to standard infantry scale. The displayed scale is read from product tags:

TagDisplayed Scale
75mm75mm / 1:24
28mm28mm / 1:60
(no scale tag)32mm / 1:56 (default)

To set the scale for a product, add the appropriate tag (e.g., 28mm, 32mm, or 75mm) in the product's Tags field in Shopify Admin.