Skip to main content

Using BITBYBIT VIEWER With a 3D Scanned Product (Gaussian Splat)

What's Inside This Tutorial?​

The BITBYBIT VIEWER block is one of the latest powerful additions to our "3D Bits" app for Shopify. This tutorial, led by Matas Ubarevičius, will guide you through the entire process of creating product pages featuring 3D scanned models, specifically focusing on Gaussian Splatting (.splat) files.

A key advantage of the BITBYBIT VIEWER block is that it does not require users to interact with the Bitbybit editors. You can load your 3D asset files directly from Shopify's CDN or any other public URL. For this tutorial, the .splat model of a chair was created using the Scaniverse app.

You will learn how to:

  • Prepare and upload your 3D scan (e.g., a .splat file) to Shopify's CDN.
  • Update the necessary product metafields provided by the "3D Bits" app.
  • Create a new product template in your Shopify theme.
  • Add the BITBYBIT VIEWER theme app extension block to this template.
  • Dynamically link the VIEWER block's settings (like Model URL, camera position, background color) to your product metafields.
  • Configure basic settings for the 3D viewing experience, such as the default camera position, target, and background color, to best showcase your scanned product.

Video Tutorial: BITBYBIT VIEWER with 3D Scans​

Download the 3D Chair Scan Model​

To follow along with the tutorial or to experiment, you can download the finished 3D chair scan (.splat format) featured in the video:

By the end of this tutorial, you'll be equipped to use the BITBYBIT VIEWER block to seamlessly integrate high-quality 3D scans into your Shopify product pages, offering your customers an immersive and detailed view of your products.