3D BITS APP FOR SHOPIFY

Introducing the 3D Bits App for Shopify - your gateway to revolutionizing online shopping with cutting-edge 3D technology!

Jul 29, 2024
by Matas Ubarevicius

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.

3D Bits On Shopify App Store

Visit our listing page on Shopify! 3D Bits is available for installation on the Shopify App Store for merchants having webshops:

SafeValue must use [property]=binding: SafeValue must use [property]=binding: SafeValue must use [property]=binding: SafeValue must use [property]=binding: SafeValue must use [property]=binding: SafeValue must use [property]=binding: (see https://g.co/ng/security#xss) (see https://g.co/ng/security#xss) (see https://g.co/ng/security#xss) (see https://g.co/ng/security#xss) (see https://g.co/ng/security#xss) (see https://g.co/ng/security#xss)

Introducing 3D Bits

We are excited to announce the release of 3D Bits application designed for Shopify merchants and developers. With 3D Bits, you can sell customized 3D products that captivate and engage your customers.

Our app seamlessly integrates into your Shopify store through the BITBYBIT RUNNER theme app extension, ensuring a smooth and efficient setup. It is easy to get the app block with 3D canvas into any section on your product page.

See It In Action

Experience the future of e-commerce by visiting our demo store, as featured in our video demonstrations, to see the latest 3D product showcases.

3D Bits app for Shopify demo store

3D Bits app for Shopify demo store

Password: 3d-bits-demo

Why Choose 3D Bits?

Immersive 3D Experience
Integrate our theme app extension seamlessly into your Shopify theme to showcase your products with dynamic 3D models.
Advanced Customization
Utilize parametric designs powered by the OpenCascade OCCT 3D geometry kernel and 3D scans created using the latest Gaussian splatting technique.
Simple Setup
Follow our comprehensive tutorials to easily set up scripts, models, 3D scans, and templates for your products.
Native Integration
Customize your 3D models with Shopify product variants and line items using custom liquid code, giving you complete control over your product presentations.
3D product page with table parametric design model in 3D canvas

3D product page with table model in 3D canvas

Let's Brainstorm Some Use Cases

Here are a few things you can do with our app, but the sky is the limit! Consider these as guidelines to get you started. It's important to understand that, depending on the use case, you may need to use a different editor. The right tool for the right job.

3D printing - laptop holder configurator

3D printing - laptop holder configurator

3D Scanning
No matter what you sell—whether it’s bikes, shoes, plants, flowers, toys, or cars—use your phone to scan your products and showcase them in full 3D to your customers. This allows you to display your products from all angles and even let customers interact with them.
Using Existing 3D Models
If you already have 3D models of your products, you can prepare industry-standard GLTF files and load them into 3D scenes.
Enhanced Presentation with BabylonJS
We leverage the powerful BabylonJS game engine to display animated 3D models. You can gamify your products—imagine presenting a 3D dress on a dancing avatar. Find a game designer to help you create such animated characters, and the 3D Bits app will render them.
Interactive 3D Experiences
With a 3D developer, you can even create games with physics simulations involving your products. For example, if you sell toy cars, you could let buyers drive them around a virtual racetrack. Your creativity is the only limit.
Product Variations
Do your products have variations? For instance, if you offer a table in five different configurations, you can create scripts that change your 3D models based on the selected variant.
Complex and Parametric Designs
If you sell mechanical parts, furniture, or other complex structures, and want to use parametric designs, you can utilize OpenCascade OCCT 3D geometry kernel algorithms in the scripts. This allows you to create 3D models that are driven by user-provided parameters.
3D Gaussian splatting scans as products

3D Gaussian splatting scans as products

Technical Details

The 3D Bits app connects your Shopify store with the bitbybit.dev platform. It lets you add interactive 3D experiences designed with our coding editors directly to your product pages. This opens up many possibilities for creating unique and engaging 3D products. You can showcase static 3D models, such as GLTF files, or 3D scans created with the Gaussian splatting technique. For more complex projects, you can design parametric CAD models and program games or simulations involving your 3D products to engage users on different levels.

To use the app, first, code your script in one of our three coding editors: Rete, Blockly, or Monaco for TypeScript. Then, export the script to the 3D Bits app on Shopify.

Available editors for your scripts

Available editors for your scripts

Below is an example of a script for creating a 3D table using the Rete editor. We use the OpenCascade OCCT 3D geometry kernel to create the table model and import a splat file for a 3D scanned palm. The script is then exported to the 3D Bits app and executed on the product page.

Rete editor with parametric design of table

Rete editor with parametric design of table

The BITBYBIT RUNNER theme app extension provides a block that you can place anywhere on your product page. This block exposes a 3D canvas element to your customers. You then paste your script into a dedicated product metafield, and the app will automatically execute it on the product page.

BITBYBIT RUNNER theme app extension block example

BITBYBIT RUNNER theme app extension block example

This app provides a window into the 3D world. When building 3D Bits, we aimed to integrate seamlessly with the Shopify user experience. The only element you need to place on your product page is the 3D canvas. The application will listen to changes in your input fields and send update commands to your scripts.

Who Is 3D Bits For?

Below, we discuss how this application can benefit different types of users.

Non-technical Merchants

By following our tutorials, non-technical merchants can create engaging product experiences themselves. Our low-code visual editors simplify the process of creating short logical scripts. We hope merchants will enjoy the process of creating 3D products as much as we do.

Our tutorials cover the most popular real-world scenarios, so we hope merchants will find their use cases among these tutorials. If you are unsure which tutorial to follow, we are always ready to guide you to the right one. Don't hesitate to reach out to us! If your use case is different but relevant to other merchants, we will be happy to prepare a new tutorial.

If merchants need help with creating 3D scripts, we are here to assist. We can provide quotes for custom 3D product integrations.

Alternatively, merchants can also reach out to the wider Shopify developer community, which has skills in developing BabylonJS 3D web experiences.

Technical Merchants

For those who are more hands-on, we invite you to explore the power of our coding editors. You can create complex 3D products that adapt and change based on various inputs and logical constraints.

We offer many tutorials on parametric design at bitbybit.dev. We believe that learning 3D design is fun and can be rewarding in many ways.

Developers

If you are a developer, you're in the right place. We invite you to explore the possibilities of the bitbybit.dev platform.

If you already know BabylonJS, you will feel at home. Bitbybit.dev integrates BabylonJS with additional CAD algorithms, making it easier to code complex geometry. You can even integrate native BabylonJS TypeScript code via the 3D Bits app. Monetize your skills by helping merchants create 3D products.

If you develop apps for Shopify merchants, we hope that 3D product configurators will become a part of your portfolio. The 3D Bits app will help your team integrate complex 3D experiences into customer webshops.

Comprehensive Support and Learning

We offer a wealth of tutorials that teach you everything from computational design to setting up and optimizing your 3D products.

3D Bits app is part of the bitbybit.dev platform

3D Bits app is part of the bitbybit.dev platform

Join the 3D Revolution

Merchants and Shopify developers are invited to explore the possibilities probided by 3D Bits application. Elevate your store, captivate your customers, and drive sales with the power of 3D.

Start transforming your online store today with 3D Bits!