You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Learn how to think like a game designer when creating 3D product configurators for Shopify using the "3D Bits" app.
6
+
tags: [shopify, 3d-bits, configurators]
7
+
---
8
+
9
+
# Configurators Are Games
10
+
11
+
**Product configurators are games.** 🎮 🕹️👾
12
+
This mindset has transformed how Shopify merchants approach 3D product pages using the **3D Bits** app. By thinking like a game designer, you can create immersive, interactive experiences that engage customers and showcase your products in unique ways.
13
+
14
+
## Why Think Like a Game Designer?
15
+
16
+
### Products Solve Problems
17
+
Your product isn’t just a “thing.” It fulfills a desire or solves a problem. A gamified product page lets users experience that value interactively. Think of your product page as a level in a game—an invitation for customers to explore, play, and immerse themselves in the experience. With smart storytelling and interactivity, you can make your product page more engaging than visiting a physical store.
18
+
19
+
### Speed and Performance Matter
20
+
Games aren’t just fun—they’re fast. To ensure your configurator feels amazing, apply these practical tips inspired by game development:
21
+
22
+
#### Keep Your 3D Assets Lean
23
+
Modern devices can handle a lot, but don’t push it—especially on mobile. Use lightweight, lower-poly models as abstractions of production-grade CAD designs. Learn more about asset preparation in the [3D Assets](./intro.md) section.
24
+
25
+
#### Use Levels of Detail (LOD)
26
+
Swap in lower-poly models for distant objects in scenes with depth or zoom. This saves performance without sacrificing visuals.
27
+
28
+
#### Add Animated Assets
29
+
Show your products in action—walking, sitting, swimming, racing or interacting with the environment. Keyframed product animations can bring your scene to life.
30
+
31
+
#### Prioritize Textures and Materials
32
+
You can fake a lot of depth with smart textures and materials. Avoid modeling every tiny bump or groove.
33
+
34
+
#### Compress Assets for Faster Load Times
35
+
Use tools like the [Khronos Group GLTF Compressor](https://github.khronos.org/glTF-Compressor-Release/) to reduce file sizes without compromising quality. The **3D Bits** app supports Draco compression for GLTF files.
36
+
37
+
## Building Configurators with the "3D Bits" App
38
+
39
+
The **3D Bits** app is built around the powerful [BabylonJS](https://learn.bitbybit.dev/learn/npm-packages/babylonjs/intro) game engine, enabling brands to create stunning, smooth, and even playable product experiences. By combining lightweight 3D assets with JSON-based scene configurations, you can create interactive configurators that respond to user input.
40
+
41
+
### BITBYBIT VIEWER
42
+
The **Viewer Editor** functionality allows you to:
43
+
* Customize camera settings.
44
+
* Configure lighting and shadows.
45
+
* Enable skyboxes for realistic reflections.
46
+
* Load multiple 3D models into the same scene.
47
+
* React to Shopify product variants (e.g., change models based on selected options).
48
+
* Integrate with 3rd party apps such as YMQ Options and others for custom pricing
49
+
50
+
Learn how to create scene configurations using the [Viewer Editor tool](../theme-app-extensions/bitbybit-viewer).
51
+
52
+
### BITBYBIT RUNNER
53
+
54
+
Use runner to access inner features of BabylonJS game engine and code actual TypeScript logic that can immerse your shop visitors.
55
+
56
+
## Conclusion
57
+
58
+
Thinking like a game designer can elevate your 3D product pages from static displays to immersive experiences. Whether you're showcasing a single model or building a complex configurator, the **3D Bits** app provides the tools to bring your vision to life. For more tips on asset preparation, visit the [3D Assets](./intro.md) section.
description: Learn about the 3D asset formats supported by the "3D Bits" app and how to prepare your models for interactive configurators and static displays on Shopify.
6
+
tags: [shopify, 3d-bits]
7
+
---
8
+
9
+
# 3D Assets for Shopify's "3D Bits" App
10
+
11
+
The **3D Bits** app supports various 3D asset formats for creating interactive configurators and static displays on Shopify. This section provides an overview of the supported formats and best practices for preparing your models for the web.
12
+
13
+
## Recommended Formats
14
+
15
+
### GLTF/GLB
16
+
The **GLTF/GLB** file format is the most widely supported and optimized for web use. It is lightweight, efficient, and ideal for static models and interactive configurators.
17
+
18
+
### Splat Files
19
+
For 3D scans, **Splat files** offer an alternative to traditional 3D models. These files can be created using third-party applications and are suitable for showcasing scanned objects.
20
+
21
+
## Important Considerations
22
+
23
+
### Public Accessibility of Assets
24
+
3D assets displayed on your Shopify store are publicly accessible, similar to images. Anyone with technical knowledge can download these files. To protect sensitive information:
25
+
* Use lightweight, lower-poly models that abstract production-grade CAD designs.
26
+
* Avoid uploading detailed production models directly.
27
+
28
+
### Rights and Permissions
29
+
Ensure you have the rights to use all parts of your 3D models, including meshes, textures, and other assets. The **3D Bits** app renders the assets you provide, but you are responsible for their legality and compliance.
30
+
31
+
## Interactive Configurators: Bridging Assets and Experiences
32
+
33
+
Interactive configurators transform static 3D assets into dynamic experiences. By combining lightweight models with JSON-based scene configurations, you can create engaging product presentations that respond to user input. Learn more about configurators in the [Configurators Are Games](./configurators-are-games.md) section.
Copy file name to clipboardExpand all lines: docs/learn/3d-bits/intro.md
+45-13Lines changed: 45 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,15 +8,17 @@ tags: [shopify, 3d-bits]
8
8
9
9
# 3D Bits: Interactive 3D Product Visualization for Your Shopify Store
10
10
11
-
## Revolutionizing 3D E-Commerce on Shopify
11
+
## What is 3D Bits?
12
12
13
-
We are thrilled to announce the development of **"3D Bits"**our dedicated Shopify app designed to bring powerful, interactive 3D product visualization and customization to your e-commerce store. This solution helps your customers visualize custom products in 3D, leading to a more engaging and informative shopping experience.
13
+
**3D Bits**is a Shopify app that lets you add interactive 3D product configurators and visualizations to your online store. With 3D Bits, your customers can see and customize products in real-time 3D, making shopping more engaging and helping them understand exactly what they’re buying.
14
14
15
-
**Experience it Yourself:**
16
-
*Check out our **[Demo Store](https://bitbybit-dev-3d-configurators.myshopify.com)**.
The web has evolved significantly. While traditional e-commerce relied on static images, today's complex and customizable products demand a richer presentation. "3D Bits" empowers Shopify merchants to showcase their products in interactive 3D, allowing buyers to explore variations and understand configuration options in real-time.
19
+
## Why Use 3D Bits?
20
+
21
+
Traditional online stores use static images, but modern shoppers want to see products from every angle and try out different options. 3D Bits makes this possible by letting you build interactive 3D experiences for your products—no advanced coding required.
20
22
21
23
<divclass="responsive-video-container">
22
24
<iframe
@@ -30,13 +32,43 @@ The web has evolved significantly. While traditional e-commerce relied on static
30
32
</iframe>
31
33
</div>
32
34
33
-
## Why We Chose Shopify
35
+
## How Does 3D Bits Work?
36
+
37
+
3D Bits is built on the [bitbybit.dev](https://bitbybit.dev) platform, which provides powerful 3D and CAD tools for both beginners and professionals. You can:
38
+
39
+
- Use **No-Code** configurators to quickly set up 3D product pages.
40
+
- Try **Low-Code** visual programming for more control.
41
+
- Write custom logic with **TypeScript** if you want advanced features.
42
+
- For developers, connect with popular 3D engines and use professional tools like VSCode.
43
+
44
+
## Plans
45
+
46
+
Currently, we offer 2 subscription plans: `Basic` and `Pro`.
47
+
48
+
### Basic Plan
49
+
50
+
The Basic plan is designed for most merchants and offers a lot of No-Code and Low-Code solutions for building 3D experiences on your Shopify storefront. You can easily configure static and dynamic 3D scenes, and use visual or TypeScript code snippets for extra logic. This plan is ideal if you want to present configurable products in 3D and only need to handle some, but not huge amounts, of logic and complexity. Most technically-minded merchants will find the Basic plan covers common use-cases for 3D product pages.
51
+
52
+
- Use No-Code and Low-Code tools to create interactive 3D scenes.
53
+
- Add short scripts for custom behaviors.
54
+
- Built to simplify 3D product presentation, but flexible enough for moderate customization.
55
+
- Supports the BabylonJS game engine.
56
+
57
+
### Pro Plan
58
+
59
+
The Pro plan is for merchants with professional development teams or those who hire programmers. Some 3D experiences can become very complex, and even our Low-Code editors or built-in TypeScript environment may not be enough. If you want to set up projects inside game engines such as ThreeJS, BabylonJS, or PlayCanvas, or if your team wants to host code on their own GitHub repositories, use VSCode, or write unit tests, the Pro plan is for you. We provide access to pre-built Vite TypeScript templates and support for advanced workflows.
60
+
61
+
- Build complex 3D experiences with your choice of engine or framework.
62
+
- Use your own codebase, GitHub, and professional tools.
63
+
- Ideal for custom solutions, advanced logic, or large-scale projects.
64
+
- Access to Vite TypeScript templates and more.
65
+
66
+
**How to choose?**
67
+
68
+
It depends on your needs and preferences. As a guideline: if your configurators start reaching 5000 lines of code, managing them with simple inline scripts becomes difficult—consider moving to the Pro plan. Also, if you want to use a custom game engine or install different NPM packages, you'll need Pro. The Basic plan is built on BabylonJS; for other technologies, go Pro.
34
69
35
-
Shopify stands as one of the largest and most popular e-commerce platforms globally. Its key strengths make it an ideal environment for innovative solutions like "3D Bits":
70
+
## Why Shopify?
36
71
37
-
***Ease of Use:** Shopify is renowned for its user-friendly interface, making it simple for merchants to set up and manage their online stores.
38
-
***Rich Feature Set:** It offers a comprehensive suite of tools and features essential for e-commerce success.
39
-
***Flexibility and Customization:** The platform is highly flexible, allowing for extensive customization to meet diverse business needs.
40
-
***Vibrant Ecosystem:** A large app store and developer community foster innovation and integration.
72
+
Shopify is one of the world’s most popular e-commerce platforms. It’s easy to use, flexible, and has a huge ecosystem of apps and developers. That’s why we chose Shopify as the home for 3D Bits—so you can easily add cutting-edge 3D experiences to your store and stand out from the competition.
41
73
42
-
We believe Shopify represents a bright future for e-commerce, and we are excited to contribute to this ecosystem with "3D Bits" helping merchants elevate their product presentation and customer engagement through immersive 3D experiences.
74
+
We’re excited to help you create amazing, interactive product pages with 3D Bits!
Copy file name to clipboardExpand all lines: docs/learn/3d-bits/plans/subscription-plans.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
-
sidebar_position: 3
2
+
sidebar_position: 1
3
3
title: "Subscription Plans"
4
-
sidebar_label: Subscription Plans
4
+
sidebar_label: Intro
5
5
description: 3D Bits app for shopify includes 2 plan offerings - one is meant for basic 3D product pages & configurator setups, the other is meant for stores who are managed by professional development teams working on larger applications.
6
6
tags: [shopify, 3d-bits]
7
7
---
@@ -33,7 +33,7 @@ Perfect for store owners who want to add 3D capabilities to their products witho
33
33
### Product Configurators
34
34
- ✅ Create simple product configurators without coding
35
35
- ✅ Build configurators with [bitbybit.dev](https://bitbybit.dev) visual programming tools
36
-
- ✅ Build advanced configurators with [bitbybit.dev](https://bitbybit.dev) TypeScript editor
36
+
- ✅ Build advanced configurators with dedicated [bitbybit.dev](https://bitbybit.dev) TypeScript editor
Copy file name to clipboardExpand all lines: docs/learn/3d-bits/theme-app-extensions/bitbybit-apps.md
+17-13Lines changed: 17 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -52,7 +52,7 @@ npm run dev # Your app runs, for example, on localhost:4242
52
52
- Build your application into a single JavaScript file.
53
53
- Serve this static file locally (e.g., via `npm run watch`).
54
54
- This mode allows you to test production-like behavior while retaining the ability to make quick changes, as the file rebuilds live upon modification.
55
-
- Update the "Public Script URL" metafield in Shopify to point to your local server's static file (e.g., `https://localhost:4173/assets/index-stable.js`).
55
+
- Update the "Public Script URL" metafield in Shopify to point to your local server's static file (e.g., `https://localhost:4242/assets/index-stable.js`).
56
56
57
57
```bash
58
58
npm run watch # Builds and serves the static file locally, rebuilding on changes.
@@ -96,16 +96,16 @@ While our templates and primary recommendations focus on TypeScript and leading
96
96
To ensure quality, maintainability, and a smooth development experience, we offer an opinionated solution:
97
97
98
98
### What We Strongly Recommend
99
-
✅ **TypeScript**: For its robust type safety, improved code clarity, and enhanced developer productivity.
100
-
✅ **Unit Tests**: Essential for building reliable, high-quality applications and preventing regressions.
101
-
✅ **Vite Bundler**: For its lightning-fast development server and optimized production builds.
102
-
✅ **Our Templates**: Following our provided templates ensures a consistent project structure and easier updates.
99
+
✅ **TypeScript**: For its robust type safety, improved code clarity, and enhanced developer productivity.
100
+
✅ **Unit Tests**: Essential for building reliable, high-quality applications and preventing regressions.
101
+
✅ **Vite Bundler**: For its lightning-fast development server and optimized production builds.
102
+
✅ **Our Templates**: Following our provided templates ensures a consistent project structure and easier updates.
103
103
104
104
### Freedom to Customize (with Caveats)
105
-
While we advocate for our recommended stack, we understand the need for flexibility:
106
-
❓ **JavaScript instead of TypeScript**: Possible, but you lose the benefits of static typing.
107
-
❓ **Alternative Bundlers (e.g., Webpack)**: May work, but are not officially supported and may require custom configuration.
108
-
❓ **Custom Project Structures**: You can adapt the structure, but significant deviations might complicate compatibility with future updates to our `bits-pro` package or templates.
105
+
While we advocate for our recommended stack, we understand the need for flexibility:
106
+
❓ **JavaScript instead of TypeScript**: Possible, but you lose the benefits of static typing.
107
+
❓ **Alternative Bundlers (e.g., Webpack)**: May work, but are not officially supported and may require custom configuration.
108
+
❓ **Custom Project Structures**: You can adapt the structure, but significant deviations might complicate compatibility with future updates to our `bits-pro` package or templates.
109
109
110
110
:::warning Customization Considerations
111
111
Deviating significantly from our recommended approach and templates is done at your own discretion. While we aim for broad compatibility, we cannot guarantee that highly customized setups will remain fully compatible with all future updates.
@@ -114,9 +114,13 @@ Deviating significantly from our recommended approach and templates is done at y
114
114
## Jumpstart Your Project: Available Templates
115
115
116
116
To get you started quickly, we provide access to our private GitHub repository containing production-ready templates:
117
-
-**React + Three.js (React Three Fiber)**: Ideal for crafting highly interactive 3D experiences.
118
-
-**Vanilla TypeScript + Three.js**: A lightweight option for efficient 2D or 3D applications.
119
-
-**Vanilla TypeScript + Babylon.js**: Perfect for building detailed 3D product configurators.
|`Public Script URL`| Points to your app's main JavaScript file. |**Development (Preview Mode):**`https://localhost:4173/assets/index-stable.js`<br/>**Production:**`https://cdn.shopify.com/s/files/1/xxx/index-<hash>.js?version=<version>`| If this metafield is empty, the block defaults to attempting to embed from `https://localhost:4242` (Local Development Mode). |
146
+
|`Public Script URL`| Points to your app's main JavaScript file. |**Development (Preview Mode):**`https://localhost:4242/assets/index-stable.js`<br/>**Production:**`https://cdn.shopify.com/s/files/1/xxx/index-<hash>.js?version=<version>`| If this metafield is empty, the block defaults to attempting to embed from `https://localhost:4242` (Local Development Mode). |
0 commit comments