Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/blog/2024-11-08-updated-bitbybit-runners.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ We are serving the Bitbybit Runners from the **JSDelivr CDN**. You can include t
<script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@<version-number-of-bitbybit>/runner/bitbybit-runner-lite-threejs.js"></script>
```

**Note:** You should replace `<version-number-of-bitbybit>` with an actual version number (e.g., `0.20.6`). You can find all the official versions of Bitbybit.dev here:
**Note:** You should replace `<version-number-of-bitbybit>` with an actual version number (e.g., `0.20.7`). You can find all the official versions of Bitbybit.dev here:
➡️ **[Bitbybit.dev GitHub Releases](https://github.com/bitbybit-dev/bitbybit/releases)**

### Examples of the Runners
Expand Down
7 changes: 4 additions & 3 deletions docs/learn/3d-bits/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ As 3D Bits makes its way into Shopify stores, we’ve started getting some recur
**Yes, absolutely!** If you can click buttons and copy-paste, you’re good to go for basic 3D model display.

**Here's the simple process:**
1. Install 3D Bits app, subscribe to Annual Base plan to begin your trial and pin the app.
1. Install 3D Bits app, subscribe to Base plan to begin your trial and pin the app.
2. Go to Metafields sections within the app admin page and hit create button.
3. Upload your 3D models to Shopify via **Content > Files**.
4. Copy the link to your uploaded 3D model.
Expand Down Expand Up @@ -76,7 +76,7 @@ For more complex configurators (e.g., where parts change dynamically beyond pre-
You have a couple of flexible paths, depending on your needs and your team's skills:

- **Want to do it yourself?**
Our Base plan includes No-Code and Low-Code editors, so you can create 3D product experiences and even basic configurators without writing any code. If you’re comfortable with simple setup steps, you can get started on your own.
Our plans include No-Code and Low-Code editors, so you can create 3D product experiences and even basic configurators without writing any code. If you’re comfortable with simple setup steps, you can get started on your own.

- **Have a developer team?**
If your developers are comfortable with coding, they’ll get the most out of our Pro plan. It unlocks advanced features and tools designed for building fully custom 3D experiences.
Expand All @@ -92,6 +92,7 @@ While you *could* build your own 3D integration from scratch (handling WebGL vie

**3D Bits takes care of the essentials:**
* Simple 3D model embedding.
* No-Code solutions that your clients will appreciate.
* Seamless Shopify metafield integration for 3D assets.
* Easy mapping between product variants and 3D models.
* The Runner block, which lets you run your own JavaScript/TypeScript to control the 3D scene and respond to store events.
Expand Down Expand Up @@ -154,7 +155,7 @@ This is where our **Pro** plan really shines, but you can also use the **BITBYBI

### Does 3D Bits offer fancy UI controls for product pages (like custom sliders, color swatches, etc.)?

**In general - no. 3D Bits is not here to reinvent the dropdown or the color swatch.**
**In general - no. 3D Bits is not here to reinvent the dropdown or the color swatch. But we do provide fancy 3D linked UI elements that improve product experience, such as points of interest - when users click on them camera flies to pre-defined position in fluid cinematic motion.**

There are many excellent Shopify apps and theme development techniques dedicated to creating sophisticated UI controls for product options. Having said that Pro plan does have the ability to use frameworks such as React, Angular or others to create UI elements. However keep in mind that we do not offer any special technologies to alter the prices. If you need such functionality you'll need to build it yourself.

Expand Down
81 changes: 51 additions & 30 deletions docs/learn/3d-bits/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,38 @@ tags: [shopify, 3d-bits]

## What is 3D Bits?

**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 theyre buying.
**3D Bits** is a Shopify app that empowers you to add interactive 3D product configurators and visualizations directly to your online store. Imagine your customers exploring and customizing products in real-time 3D – that's the immersive shopping experience 3D Bits delivers, helping them understand exactly what they're buying.

**Try it out:**
**Ready to try it out?**
* Visit our **[Demo Store](https://bitbybit-dev-3d-configurators.myshopify.com)**
* Use password: `3d-bits-demo`

<div style={{textAlign: 'left', margin: '2rem 0'}}>
<h2>
<a href="https://apps.shopify.com/3d-bits-1" target="_blank">
Install 3D Bits from Shopify App Store
Install 3D Bits from the Shopify App Store
</a>
</h2>
</div>

## Why Use 3D Bits?
## Why Choose 3D Bits?

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.
Traditional online shopping relies on static images, but today's customers demand more. They want to see products from every angle and visualize different options. 3D Bits makes this possible, allowing you to create dynamic 3D experiences for your products without needing advanced coding skills.

Here's a quick look at 3D Bits in action:
<div class="responsive-video-container">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/y868HEQ8-lQ"
title="3D Bits App For Shopify Demo"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allow="accelerometer; autoplay; clipboard-write; encrypted-m_edia; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>

## What Our Customers Say
## Hear From Our Customers

<div class="testimonials-section">

Expand All @@ -64,44 +65,64 @@ Traditional online stores use static images, but modern shoppers want to see pro

</div>


## How Does 3D Bits Work?

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:
3D Bits is powered by the [bitbybit.dev](https://bitbybit.dev) platform, offering robust 3D and CAD tools for all skill levels:

* **No-Code:** Quickly set up interactive 3D product pages.
* **Low-Code:** Use visual programming for more detailed control.
* **TypeScript:** Write custom code for advanced functionalities.
* **Developer-Friendly:** Integrate with popular 3D engines and professional tools like VSCode.

## Our Plans

We offer three subscription plans: `Base`, `Standard`, and `Pro`, designed to fit various needs and complexities.

- Use **No-Code** configurators to quickly set up 3D product pages.
- Try **Low-Code** visual programming for more control.
- Write custom logic with **TypeScript** if you want advanced features.
- For developers, connect with popular 3D engines and use professional tools like VSCode.
### Base Plan

## Plans
Ideal for beginner merchants, the Base plan provides No-Code and Low-Code solutions to build dynamic 3D experiences. Whether you're using static 3D assets or implementing more complex parametric designs, this plan simplifies 3D product presentation.

Currently, we offer 2 subscription plans: `Basic` and `Pro`.
* Create interactive 3D scenes with No-Code and Low-Code tools.
* Write short scripts for custom behaviors.
* Supports the BabylonJS game engine.

### Basic Plan
### Standard Plan

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.
The Standard plan expands on the Base features, perfect for merchants seeking enhanced visual effects and dedicated support.

- Use No-Code and Low-Code tools to create interactive 3D scenes.
- Add short scripts for custom behaviors.
- Built to simplify 3D product presentation, but flexible enough for moderate customization.
- Supports the BabylonJS game engine.
* Includes all `Base` plan features.
* Utilize advanced navigation, such as 3D points of interest in No-Code editors.
* Benefit from Standard support, including expert consultations to optimize performance.

### Pro Plan

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.
Designed for professional development teams or merchants requiring premium support, the Pro plan offers flexibility and power.

* Includes all `Standard` plan features.
* Build complex 3D experiences with your preferred engine (e.g., ThreeJS, BabylonJS, PlayCanvas).
* Use your own codebase, GitHub repositories, and professional development tools like VSCode.
* Access pre-built Vite TypeScript templates for advanced workflows.
* Receive premium support, including assistance in building your first No-Code configurator.

#### [Learn More](/learn/3d-bits/plans/subscription-plans)

### Choosing Your Plan

- Build complex 3D experiences with your choice of engine or framework.
- Use your own codebase, GitHub, and professional tools.
- Ideal for custom solutions, advanced logic, or large-scale projects.
- Access to Vite TypeScript templates and more.
**By Support Level:**
* **Base:** Self-learners who need guidance to tutorials and documentation.
* **Standard:** Teams looking for expert advice tailored to their product.
* **Pro:** Those who want our direct help in building their first No-Code configurator.

**How to choose?**
**By No-Code Features:**
* **Base:** For products that switch & control static 3D assets based on user options.
* **Standard:** To add beautiful 3D effects that make your products stand out.

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.
**By Configurator Complexity:**
* **Base:** For configurators with custom logic that can be handled by low-code visual scripting or short TypeScript programs.
* **Pro:** For complex configurators (e.g., over 5000 lines of TypeScript code), custom game engines, or the need to install different NPM packages.

## Why Shopify?

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.
Shopify is a leading e-commerce platform, renowned for its ease of use, flexibility, and vast ecosystem. We chose Shopify for 3D Bits to ensure you can effortlessly integrate cutting-edge 3D experiences, helping your store captivate customers and stand out in the competitive online market.

Were excited to help you create amazing, interactive product pages with 3D Bits!
We're excited to help you create amazing, interactive product pages with 3D Bits!
162 changes: 80 additions & 82 deletions docs/learn/3d-bits/plans/subscription-plans.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,88 +10,86 @@ tags: [shopify, 3d-bits]

## Plan Comparison

| Feature | Annual Base | Annual Pro |
|---------|-------------|------------|
| **Price** | 142$ yearly | 900$ yearly |
| **Trial** | 14 days | 21 days |
| **Target Audience** | Store owners, small teams | Professional development teams |
| **Setup Complexity** | Easy, no coding required (optional scripting) | Advanced, requires development skills |
| **Custom Development** | Optional | Mandatory |

## Annual Base Plan

Perfect for store owners who want to add 3D capabilities to their products without complex development work.

### Core 3D Features
- ✅ Add 3D models to unlimited products
- ✅ Upload and display 3D files (GLTF format)
- ✅ Show realistic 3D product scans (Splat format)
- ✅ Let customers customize products in 3D
- ✅ Mobile-friendly 3D viewing
- ✅ Fast loading and smooth performance

### Product Configurators
- ✅ Create simple product configurators without coding
- ✅ Build configurators with [bitbybit.dev](https://bitbybit.dev) visual programming tools
- ✅ Build advanced configurators with dedicated [bitbybit.dev](https://bitbybit.dev) TypeScript editor
- ✅ Create interactive 3D experiences
- ✅ Add realistic physics to product demos
- ✅ Design parametric and custom shapes

### User Experience
- ✅ View products in full screen mode
- ✅ Show loading animations during processing
- ✅ Connect with pricing and UI apps

:::tip Who is this for?
Annual Base is ideal for merchants who want to enhance their product pages with 3D models and simple configurators without needing a development team.
:::

## Annual Pro Plan

Designed for professional development teams who need complete control and advanced customization capabilities.

### Everything in Annual Base, Plus:

### Professional Development Tools
- ✅ Develop professional Single Page Applications (SPA) for product pages
- ✅ Embed SPA apps to product page via Theme App Extension block
- ✅ Use ThreeJS, BabylonJS, PlayCanvas or other web 3D engines
- ✅ Write custom Vite based TypeScript apps for 3D & 2D product presentations

### Development Workflow
- ✅ Use the tools & editors that your team loves - VSCode, GitHub, etc.
- ✅ Ensure quality of your apps via unit tests
- ✅ Use configured local host development environment
- ✅ Emulate production environment in preview mode
- ✅ Easily embed build output via single JavaScript file to product page

### Exclusive Access
- ✅ Access & clone opinionated example templates from our private GitHub repository
- ✅ Access private `bits-pro` NPM package allowing communication between product page inputs & your app logic

:::warning Development Skills Required
Annual Pro requires technical expertise in JavaScript/TypeScript, 3D web development, and modern web development workflows. This plan is designed for development teams, not end users.
:::

## Getting Started

### Annual Base
1. Subscribe to the plan
2. Start adding 3D models immediately
3. Use our visual tools to create configurators
4. Publish to your store

### Annual Pro
1. Subscribe to the plan
2. **Wait 24 hours** for access tokens to be sent to your email
3. Access our private GitHub repository and NPM package
4. Follow our [BITBYBIT APPS Pro guide](/learn/3d-bits/theme-app-extensions/bitbybit-apps)
5. Start developing custom 3D applications

:::info Access Token Delivery
Pro plan subscribers will receive access tokens within 24 hours of subscription. If you don't receive them, contact us at [[email protected]](mailto:[email protected]) and we'll extend your trial period by 3 days.
:::
| Feature | Base | Standard | Pro |
|---------|-------------|------------|------------|
| **Annual Price** | **$142** / year | **$530** / year | **$900** / year |
| **Monthly Price** | **$25** / month | **$75** / month | **$120** / month |
| **Savings - Annual** | **<span style={{color: "lightgreen"}}>53%</span>** | **<span style={{color: "lightgreen"}}>41%</span>** | **<span style={{color: "lightgreen"}}>38%</span>** |
| **Trial** | 7 days | 14 days | 21 days |
| **Target Audience** | Beginners setting up shops | Merchants running existing business | Pro 3D development teams |
| **Theme App Extensions** | VIEWER, RUNNER, PREVIEW | VIEWER, RUNNER, PREVIEW | VIEWER, RUNNER, PREVIEW, APPS |
| **Nr Products** | Unlimited | Unlimited | Unlimited |
| **Support** | Fundamental | Standard | Premium |
| **How We Help** | We help mostly by providing links to documentation and tutorials | We actively guide your team by explaining how to set 3D products | We become part of your team and help set up first no-code configurator with your 3D assets |


## Plan Differences Per Shopify Theme App Extension

### BITBYBIT VIEWER (No-Code)

BITBYBIT VIEWER theme app extension supports building 3D configurators without writing code. It provides advanced editor user friendly editor that helps you load 3D models, configure loading indicators, scene, lights, camera settings and link 3D models or materials to product options.

| Feature | Base | Standard | Pro |
|---------|-------------|------------|------------|
| **Nr 3D Models** | Unlimited | Unlimited | Unlimited |
| **3D Model Variants** | ✅ | ✅ | ✅ |
| **Skybox** | ✅ | ✅ | ✅ |
| **Camera Settings** | ✅ | ✅ | ✅ |
| **Background Color** | ✅ | ✅ | ✅ |
| **Loading Progress Indicator** | ✅ | ✅ | ✅ |
| **Custom Loading Logo** | ✅ | ✅ | ✅ |
| **Directional Lights** | ✅ | ✅ | ✅ |
| **File Size Validations** | ✅ | ✅ | ✅ |
| **GLTF (File Format)** | ✅ | ✅ | ✅ |
| **3DGS (File Format 3D Scans)** | ✅ | ✅ | ✅ |
| **KHR Material Variants (GLTF)** | ✅ | ✅ | ✅ |
| **GLTF Parsing** | ✅ | ✅ | ✅ |
| **GLTF Node Variants** | ✅ | ✅ | ✅ |
| **Points of interest** | x | ✅ | ✅ |
| **Points of interest variants** | x | ✅ | ✅ |

Features in `Standard` and `Pro` plans are expected to grow, so remember to check this list for potential updates in the future.

[Learn More](/learn/3d-bits/theme-app-extensions/bitbybit-viewer)

### BITBYBIT RUNNER (Low-Code & Pro-Code)

BITBYBIT RUNNER theme app extension supports building 3D configurators by composing visual scripts or writing short TypeScript programs.

| Feature | Base | Standard | Pro |
|---------|-------------|------------|------------|
| **Bitbybit Rete Editor** | ✅ | ✅ | ✅ |
| **Bitbybit Blockly Editor** | ✅ | ✅ | ✅ |
| **Bitbybit TypeScript Editor (Monaco)** | ✅ | ✅ | ✅ |

[Learn More](/learn/3d-bits/theme-app-extensions/bitbybit-runner)

### BITBYBIT APPS (Pro-Code)

BITBYBIT APPS theme app extension supports building 3D configurators by writing full 3D SPA applications in the editors that your team prefers.

| Feature | Base | Standard | Pro |
|---------|-------------|------------|------------|
| **Vite template examples** | x | x | ✅ |
| **Bits-pro NPM package** | x | x | ✅ |
| **Supports local dev environment** | x | x | ✅ |
| **Unit Tests** | x | x | ✅ |
| **Git** | x | x | ✅ |
| **BabylonJS game engine** | x | x | ✅ |
| **ThreeJS game engine** | x | x | ✅ |
| **PlayCanvas game engine** | x | x | ✅ |

[Learn More](/learn/3d-bits/theme-app-extensions/bitbybit-apps)

### BITBYBIT PREVIEW (Low-Code & Pro-Code)

BITBYBIT PREVIEW theme app extension allows you to embed published bitbybit.dev scripts as your products.

| Feature | Base | Standard | Pro |
|---------|-------------|------------|------------|
| **Embed public Bitbybit scripts** | ✅ | ✅ | ✅ |

[Learn More](/learn/3d-bits/theme-app-extensions/bitbybit-preview)

## Support

Expand Down
Loading