How To Create Shopify Product Variants And Link Them With 3D L...

How To Create Shopify Product Variants And Link Them With 3D Laptop Holder TypeScript In 3D Bits App

In this tutorial, you'll learn how to add a 3D printable laptop holder to your Shopify store using the 3D Bits app. Matas Ubarevicius will show you how to design the 3D model using TypeScript and then convert it to JavaScript. You'll also learn how to set up different product variants and link them to the 3D model.

We'll integrate the 3D model into your Shopify store by using the BITBYBIT RUNNER theme app extension. You'll learn how to connect the JavaScript code to your product page through Shopify metafields, ensuring that your customers can interact with the 3D model directly on your site.

Throughout the tutorial, we'll cover important details like how to properly name and organize runner inputs and variants. You'll also learn how to trigger real-time updates to the model's geometry, giving customers the ability to customize the laptop holder to their specific needs before purchasing.

By the end of this tutorial, you'll not only be able to add a 3D printable laptop holder to your Shopify store, but you'll also gain valuable insights into how the 3D printing industry can leverage customizable 3D product configurators on Shopify.

< Previous Next >

Course lectures

These are all the lectures of the course. Navigate freely between them by clicking.

Approximate Time Required: 154 minutes

Introducing 3D Bits App For Shopify - Sell Configurable 3D Products On Your Web Stores

Approx. time required: 4 min.

Unlock the power of 3D products on your Shopify store with 3D Bits. Our app empowers you to create, customize, and sell stunning 3D products, transforming your customer’s shopping experience into an immersive journey.

How To Sell 3D Products On Shopify By Using 3D Bits App

Approx. time required: 10 min.

Learn how to sell 3D products online on Shopify by using 3D Bits app. In this tutorial you will see how to install the app, create a 3D product page and integrate scripts with Bitbybit editors.

How To Install And Set Up 3D Bits App For Shopify For The First Time

Approx. time required: 12 min.

Learn how to install and set up the 3D Bits app for Shopify for the first time. This app helps you sell 3D products. Matas Ubarevicius will guide you step by step through the process.

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

Approx. time required: 9 min.

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.

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

Approx. time required: 7 min.

BITBYBIT PREVIEW theme app extension block provides functionality for embedding publically available bitbybit.dev projects and exposing them as Shopify products. These 3D experiences can't be configured with variants, but they can be used to showcase your rich and unique 3D product experiences.

How To Use 3D Bits App To Load GLTF Files and Apply Textures Via Shopify Variants Of Your Products

Approx. time required: 22 min.

In this tutorial you will learn how to load GLB files via 3D Bits app and apply different textures whenever the variants change. We will use a model of the picture frame, within which the picture itself will be changing.

How To Prepare 3D Gaussian Splatting Scan Of The Bike And Sell Via 3D Bits App For Shopify

Approx. time required: 16 min.

In this tutorial we teach you how to edit 3D Gaussian splatting scans taken on your mobile phone. We use the SuperSplat editor by PlayCanvas and then export the file, which we upload on Shopify CDN.

How To Configure 3D Bits App For Optimal Shopify Product Monetisation and Sales Performance

Approx. time required: 20 min.

Understand how to configure 3D Bits app for Shopify. Matas Ubarevicius will walk you through various settings on the BITBYBIT RUNNER theme app extension. You will learn how to optimize loading performance of your 3D product models and scripts, update bitbybit-runner.js JavaScript versions without updating the app, enable or disable 3D full screen mode, OpenCascade, JSCAD kernels, Havok physics engine, various event listeners.

How To Link Shopify Product Variants To 3D Model Variable Parameters By Using 3D Bits App

Approx. time required: 16 min.

In this tutorial you will learn how to create a very simple 3D product on Shopify. You will make a cube on bitbybit.dev Rete editor by using OpenCascade technology kernel OCCT3D.

How To Make Parametric 3D Product Configurator Of Table With Plant 3D Scan Using Shopify 3D Bits App

Approx. time required: 16 min.

In this tutorial, you'll learn how to set up a 3D table configurator on your Shopify store using the 3D Bits app. Matas Ubarevicius will guide you through the process, showing you how to create variants and add custom Liquid code for line items. This will let you control various aspects of the 3D model, such as the table's height and leg thickness, using easy-to-use sliders.