Tutorial Explains How To Use 3D Bits App For Shopify With BITBYBIT VIEWER Theme App Extension Block

3D Bits on Shopify app store
https://apps.shopify.com/3d-bits-1

BITBYBIT VIEWER is one of the latest additions to the 3D Bits app for Shopify. In this tutorial, Matas Ubarevicius will walk you through the steps needed to create 3D-scanned Gaussian splatting products for your Shopify store and share them with the world. This new theme app extension block does not require users to use bitbybit.dev editors and can load asset files directly from Shopify's CDN. The Scaniverse app was used to create the splat model featured in this tutorial.

Matas will update the metafields and create a product template that uses the VIEWER block. He will also link block settings to product metafields and explain how to configure basic settings of the experience, such as the default camera position, target, and background color.

Demo store examples
https://bitbybit-dev-3d-configurators...
Password 3d-bits-demo

Read more about the recent updates to 3D Bits app
https://bitbybit.dev/blog/updated-3d-...

Intro to viewer
https://bitbybit.dev/start/shopify/3d...

#shopify #app #3dbits #3d #viewer #userexperience #ux #ecommerce #tutorial #lecture #lesson #course #onlinecourse #settings #configuration #options #monetisation #sales #optimization #performance #gettingstarted #beginner #beginnerfriendly #introduction #setup #howto #cad #application #3dscan #shopifyapp #3dshopify #shopify3d #3dscanning #3dprint #3dprinting #gaussiansplatting #3dgs #gltf #shopifystoresetup #3dmerchandise #3dgoods #3dproduce #produce #goods #3dstock #stock #3dcommodity #commodity #bitbybitdev #parametricdesign #computationaldesign #babylonjs #gameengine #computeraideddesign #shop #store #3dsoftware #software #webapp #3dassets #parametric #procedural #3dproduct #3dproducts #shopifydeveloper #merchants #customers #customization #3ddesign #design #webgl #gamedev #3dmodeling #immersive #immersiveexperience #canvas

00:00 Intro to the tutorial and product page with 3D scanned chair that we will be building
00:40 Explanation how to update to new metafields
01:15 Create new product called 3D Scanned Chair
01:35 Create new template 3d-bits-viewer that is branched from Default Product template
01:56 Add block called BITBYBIT VIEWER from Apps under product information
02:56 Create dynamic links from BITBYBIT VIEWER settings to 3D Bits product metafields
04:05 Return to the product page and apply the template 3d-bits-viewer
04:20 Upload the 3DGS Gaussian splat file to Shopify CDN and copy the link to the 3D Bits Model URL metafield
05:20 Update the camera position and target so that the model is in the good spot when product loads
05:57 Preview the 3D product page
06:05 Finish setting up the product with the description, use screenshot as a preview
06:35 Configure template to render 3D model in the place of the preview picture
07:23 Preview the product page with default Shopify experience
07:45 Learn how to change default background colour of the 3D scene
07:55 Preview scanned product in black background
08:05 Small explanation on when you would use Scene Config metafield with extra JSON controls
08:40 Learn how to enter the full-screen model of the 3D scene from your Shopify product page