diff --git a/docs/blog/2024-04-23-introducing-bitbybit-runner.md b/docs/blog/2024-04-23-introducing-bitbybit-runner.md index dd293ac0..42644b5f 100644 --- a/docs/blog/2024-04-23-introducing-bitbybit-runner.md +++ b/docs/blog/2024-04-23-introducing-bitbybit-runner.md @@ -148,4 +148,4 @@ First, you must include the `BITBYBIT-RUNNER.JS` script on your website. This si The JavaScript file is hosted on the JSDelivr CDN and can be included on your website by adding this script tag to your HTML (usually in the `` or before the closing `` tag): ```html - \ No newline at end of file + \ No newline at end of file diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index d3ca5100..affc28e7 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -30,23 +30,6 @@ const config: Config = { defaultLocale: "en", locales: ["en"], }, - plugins: [ - [ - "@docusaurus/plugin-client-redirects", - { - redirects: [ - { - from: "/learn/npm-packages/start-with-three-js", - to: "/learn/npm-packages/threejs/start-with-three-js", - }, - { - from: "/learn/npm-packages/start-with-babylon-js", - to: "/learn/npm-packages/babylonjs/start-with-babylon-js", - }, - ], - } - ], - ], presets: [ [ "classic", diff --git a/docs/learn/3d-bits/3d-assets/_category_.json b/docs/learn/3d-bits/3d-assets/_category_.json new file mode 100644 index 00000000..c0205b7b --- /dev/null +++ b/docs/learn/3d-bits/3d-assets/_category_.json @@ -0,0 +1,10 @@ +{ + "label": "3D Assets", + "position": 6, + "link": { + "type": "generated-index", + "title": "3D Assets", + "description": "Learn how to use and prepare various assets to make your product configurators pop.", + "slug": "/3d-bits/3d-assets" + } +} \ No newline at end of file diff --git a/docs/learn/3d-bits/3d-assets/configurators-are-games.md b/docs/learn/3d-bits/3d-assets/configurators-are-games.md new file mode 100644 index 00000000..7ea14c54 --- /dev/null +++ b/docs/learn/3d-bits/3d-assets/configurators-are-games.md @@ -0,0 +1,58 @@ +--- +sidebar_position: 2 +title: "Configurators Are Games" +sidebar_label: Configurators Are Games +description: Learn how to think like a game designer when creating 3D product configurators for Shopify using the "3D Bits" app. +tags: [shopify, 3d-bits, configurators] +--- + +# Configurators Are Games + +**Product configurators are games.** 🎮 🕹️👾 +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. + +## Why Think Like a Game Designer? + +### Products Solve Problems +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. + +### Speed and Performance Matter +Games aren’t just fun—they’re fast. To ensure your configurator feels amazing, apply these practical tips inspired by game development: + +#### Keep Your 3D Assets Lean +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. + +#### Use Levels of Detail (LOD) +Swap in lower-poly models for distant objects in scenes with depth or zoom. This saves performance without sacrificing visuals. + +#### Add Animated Assets +Show your products in action—walking, sitting, swimming, racing or interacting with the environment. Keyframed product animations can bring your scene to life. + +#### Prioritize Textures and Materials +You can fake a lot of depth with smart textures and materials. Avoid modeling every tiny bump or groove. + +#### Compress Assets for Faster Load Times +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. + +## Building Configurators with the "3D Bits" App + +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. + +### BITBYBIT VIEWER +The **Viewer Editor** functionality allows you to: +* Customize camera settings. +* Configure lighting and shadows. +* Enable skyboxes for realistic reflections. +* Load multiple 3D models into the same scene. +* React to Shopify product variants (e.g., change models based on selected options). +* Integrate with 3rd party apps such as YMQ Options and others for custom pricing + +Learn how to create scene configurations using the [Viewer Editor tool](../theme-app-extensions/bitbybit-viewer). + +### BITBYBIT RUNNER + +Use runner to access inner features of BabylonJS game engine and code actual TypeScript logic that can immerse your shop visitors. + +## Conclusion + +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. diff --git a/docs/learn/3d-bits/3d-assets/intro.md b/docs/learn/3d-bits/3d-assets/intro.md new file mode 100644 index 00000000..488a322f --- /dev/null +++ b/docs/learn/3d-bits/3d-assets/intro.md @@ -0,0 +1,34 @@ +--- +sidebar_position: 1 +title: "3D Assets for Shopify's '3D Bits' App" +sidebar_label: Intro +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. +tags: [shopify, 3d-bits] +--- + +# 3D Assets for Shopify's "3D Bits" App + +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. + +## Recommended Formats + +### GLTF/GLB +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. + +### Splat Files +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. + +## Important Considerations + +### Public Accessibility of Assets +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: +* Use lightweight, lower-poly models that abstract production-grade CAD designs. +* Avoid uploading detailed production models directly. + +### Rights and Permissions +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. + +## Interactive Configurators: Bridging Assets and Experiences + +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. + diff --git a/docs/learn/3d-bits/3d-assets/preparing-gltf.md b/docs/learn/3d-bits/3d-assets/preparing-gltf.md new file mode 100644 index 00000000..1d9cf72c --- /dev/null +++ b/docs/learn/3d-bits/3d-assets/preparing-gltf.md @@ -0,0 +1,109 @@ +--- +sidebar_position: 3 +title: "Preparing GLTF 3D Assets" +sidebar_label: Preparing GLTF 3D Assets +description: Learn about the best practices and solutions when preparing 3D GLTF assets for your 3D configurators. +tags: [shopify, 3d-bits, configurators] +image: https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/preparing-gltf-assets-for-3d-bits-app-for-shopify.jpeg +--- + +# Where to Start + +The first step in preparing 3D assets for your configurator is having 3D models of your products. + +If your brand already designs and manufactures physical goods, there’s a good chance you already have detailed, good-looking 3D models on hand. Resellers can often get these from manufacturers - many keep accurate CAD files of their products for engineering or marketing purposes. Not all manufacturers will share them, though, so sometimes you’ll need to commission a 3D artist or designer to create them from scratch in professional CAD software. Some AI tools also exist, which can create 3D assets from 2D images, but in many cases they are not optimised for speed or quality, this may however change in the near future. + +![Preparing GLTF Assets](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/preparing-gltf-assets-for-3d-bits-app-for-shopify.jpeg "Learn How to prepare GLTF assets") + +# What Formats Merchants Usually Have + +If you do manage to get existing 3D models, they’ll most likely come in formats such as **STEP (ISO 10303)**, **IGES**, or other proprietary CAD formats. These are common in professional design workflows because they use something called **BRep** - short for Boundary Representation - to store geometry. Usually people use software packages such as FreeCAD, SolidWorks, Fusion 360, Catia, Rhino, OpenCascade and similar modeling software packages to create these assets. + +BRep is very different from polygonal meshes. Instead of a collection of triangles, vertices, and indices, a BRep model is a precise mathematical description: NURBS curves, faces, shells, and solids define the surfaces and edges of the object. This is great for manufacturing and engineering, but to use these models on the web, you’ll need to **triangulate** them into formats like GLTF, OBJ, FBX, 3MF, or STL. + +# From BRep to GLTF + +Not all CAD or BRep editors can export directly to GLTF. In many cases, you’ll need to first export to an intermediate format such as FBX or STL, bring that into Blender, and then export to GLTF. Another common challenge is that CAD exports often lack proper material and texture data. If that’s the case, you’ll have to apply materials and textures inside Blender, which can be time-consuming but is sometimes unavoidable without some additional 3rd party plugins. + +When you do triangulate, you’ll usually be able to choose how dense the mesh will be. This is a crucial decision: fewer triangles mean the GPU can render your model much faster. The goal is to create low-poly models that still look good. Don’t expect a browser to smoothly handle millions of triangles - especially on older devices. Even high-end GPUs will struggle if you push them too far. Designing a configurator is a lot like designing a video game: performance matters just as much as visual quality. We go deeper into this mindset in [Configurators Are Games](./configurators-are-games.md). + +# Editing Triangulated Models + +Once you have a triangulated model, you’ll probably need to make adjustments. We recommend Blender for this. It’s free, open source, and maintained by some of the most experienced 3D professionals in the industry. Of course, it’s not the only option - commercial tools like 3ds Max can also handle triangulated models perfectly well. + +[![Blender Logo](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/blender-logo.jpg "Blender Logo")](https://blender.org) +[Download Blender Here](https://www.blender.org/download/) + +# Understanding Meshes + +In the context of 3D assets, a “mesh” is simply a triangulated section of your model assembly. It’s made up of triangles, each defined by three points in space. You can read more about meshes [here](https://en.wikipedia.org/wiki/Polygon_mesh), but for now, think of them as the building blocks that make up the visible geometry of your model. + +In order to understand how many triangles or polygon faces your model contains, you should enable "Scene Stats" in Blender. Click right mouse button in the bottom right corner of Blender and enable it. + +![Understand how many triangles your 3D assets contain in Blender](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/blender-scene-stats.jpeg "Blender scene stats") +*Enable Scene stats to understand how many triangles your 3D assets contain in Blender.* + +# GLTF and Why We Use It + +GLTF has become one of the most widely supported formats for delivering 3D assets online. It’s designed to be efficient to load, transmit, and render in real time. You can read more about it on the [Khronos website](https://www.khronos.org/gltf/), but the short version is: if you’re delivering interactive 3D experiences on the web, GLTF is the format you want to be working with. Blender supports exporting to GLTF directly, and once you’ve done that, you can upload the file to Shopify’s CDN for use with the 3D Bits app. + +# Keeping Performance in Mind + +One of the biggest performance killers in a 3D scene is having too many separate meshes. Ideally, your mesh count should match the number of materials in your model. There are valid reasons to split meshes - maybe you need to hide or show parts independently while configuring - but in general, the fewer meshes you have, the better. + +The reason comes down to something called **draw calls**. Every mesh in your scene requires a separate draw call to be rendered, and this happens for every frame. If you want a smooth 60 frames per second, you have roughly 16 milliseconds to render each frame. Too many draw calls, and you’ll exceed that budget quickly. + +If you’re working in CAD, you can often merge parts by material before exporting. In Blender, you can select multiple meshes and use **Object → Join** to combine them into a single mesh. The specifics vary from one tool to another, but the principle is always the same: merge what you can. + +![Join objects in Blender](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/blender-join-mesh-objects.jpeg "Join separate mesh objects together in Blender") +*Join separate mesh objects together in Blender.* + +# Textures and Why They Matter + +Textures are the 2D images you wrap around your 3D geometry to add surface detail. Just like images on a website, textures should be optimized. Larger textures mean more GPU memory usage and slower rendering. + +A good rule of thumb: make your textures as small as possible without losing visible quality. If your model will only ever be seen from a certain distance, you don’t need a 4K texture. In fact, 256×256 or 512×512 is plenty for most surfaces. Only use 4K textures when absolutely necessary. + +We also recommend using **KTX** texture compression inside GLTF files. If you have a repeating surface pattern, like a brick wall, it’s much faster to tile a small texture across the surface than to load a huge image that covers the whole thing in one go. + +# Compression for Faster Loads + +When a customer visits your store, their browser has to download everything: HTML, CSS, JavaScript, images, videos, and, in our case, 3D models. The bigger your 3D files, the longer they’ll take to load. And if loading takes too long, some visitors won’t stick around. + +The good news is that GLTF files compress very well. You should always export to **GLB** - the binary version of GLTF - since it’s much smaller than the text-based version. Blender’s GLTF exporter can apply compression during export. + +![Blender Compression Options](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/blender-compress.jpeg "Blender Compression Options") + +For even more options, try the free [Khronos GLTF Compressor](https://github.khronos.org/glTF-Compressor-Release/) and enable **Draco compression**. 3D Bits can decompress Draco-compressed files without issue. This tool can also compress textures and save them in formats like KTX. + +Khronos compressor tool also will show you the split screen view of original vs compressed file with a nice separator line - it makes it super easy to compare before and after quality of the model. + +![Khronos GLTF Compressor](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/khronos-gltf-compressor.jpeg "Khronos compressor tool comparison mode") +*Khronos compressor allows to compare original model with compressed.* + +[Read More About The Compressor](https://www.khronos.org/blog/optimize-3d-assets-with-khronos-new-gltf-compressor-tool) + +# Hosting on Shopify’s CDN + +Once your file is ready, upload it to Shopify. Go to **Content → Files**, drag and drop your GLTF or GLB, and copy its URL if you want to use it in 3D Bits. Using Shopify’s CDN ensures your file is cached on servers close to your customers. If someone in Germany loads your product page, Shopify will serve the file from a nearby server, cutting down load times. + +Shopify has a 20 MB file size limit, but that’s rarely an issue with well-optimized assets. If your model is bigger than that, you can split it into multiple files - 3D Bits can load several at once. If you decide to use your own CDN instead, make sure the files are publicly accessible. + +# Reusing Parts with Instancing + +If your model contains repeated parts - like bolts, wheels, or identical furniture sets - it’s best to save that part as a separate GLTF file and then load it once in 3D Bits, placing **instances** wherever needed. Instancing means the GPU loads the geometry only once and reuses it multiple times in the scene, which is far more efficient than loading duplicate meshes. + +# Testing Before You Go Live + +GLTF files need to be valid to be properly loaded into any 3D software, 3D Bits is no exception. That is why you should validate your files for any potential issues. We recommend using [Khronos GLTF validator](https://github.khronos.org/glTF-Validator/). Just upload your model and it will show if your file contains errors or potential improvements. + +3D Bits is built on top of BabylonJS, which comes with a fantastic [Sandbox Viewer](https://sandbox.babylonjs.com/). Drop your GLTF file in there to preview it before uploading. You’ll spot missing textures, strange triangulation issues, or other export problems immediately. If you see a problem in the Sandbox, you’ll likely see it in 3D Bits as well. + +![BabylonJS Sandbox](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/babylonjs-sandbox.jpeg "BabylonJS Sandbox can be used to test loading your compressed 3D assets, inspect contents") +*BabylonJS Sandbox can be used to test loading your compressed 3D assets, inspect contents.* + +# Wrapping Up + +Preparing 3D assets for the web is a balancing act between fidelity, file size, and performance. You might start with a pristine engineering model, but to make it run smoothly in a browser, you’ll need to simplify geometry, optimize textures, merge meshes, and compress files. + +This guide has walked through the journey from CAD to GLTF, explained why mesh count and texture size matter, and shown you how to host and test your assets before launch. Every product and every merchant is different, but the principles are the same: keep things light, keep them efficient, and your customers will have a faster, smoother, and more engaging 3D experience. diff --git a/docs/learn/3d-bits/faq.md b/docs/learn/3d-bits/faq.md index ced51980..b4c9cee4 100644 --- a/docs/learn/3d-bits/faq.md +++ b/docs/learn/3d-bits/faq.md @@ -1,7 +1,7 @@ --- sidebar_position: 2 title: "3D Bits Shopify App - FAQ" -sidebar_label: "3D Bits FAQ" +sidebar_label: "FAQ" description: "Frequently asked questions about using the 3D Bits app to integrate 3D models and product configurators into your Shopify store." tags: [shopify, 3d-bits] --- @@ -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 for a trial and pin it. +1. Install 3D Bits app, subscribe to Annual 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. @@ -71,23 +71,46 @@ For more complex configurators (e.g., where parts change dynamically beyond pre- --- +### I'm a merchant, but my store is managed by professional developers. What are my options? + +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. + +- **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. + For more details on what 3D Bits offers to developers, see the next question. + +--- + ### We’re developers building stores for merchants. Should we bother with 3D Bits? -**Definitely.** +**Absolutely.** -While you *can* build everything from scratch (integrating a WebGL viewer, handling model loading, Shopify integration, etc.), ask yourself: do you really want to keep reinventing that wheel for each new theme or client? +While you *could* build your own 3D integration from scratch (handling WebGL viewers, model loading, Shopify integration, etc.), that’s a lot of repeated work for every project or theme. +**3D Bits takes care of the essentials:** +* Simple 3D model embedding. +* 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. -3D Bits handles the essential groundwork: -* Easy 3D model embedding. -* Shopify metafield integration for 3D assets. -* Basic variant-to-model mapping. -* A bridge (the Runner block) for your custom JavaScript/TypeScript logic to interact with the 3D scene. +This means you can focus on what makes your client’s store unique—custom logic, creative 3D experiences, and advanced interactivity—without reinventing the technical foundation every time. We’ve been there, and it’s not fun! -This frees you up to focus on the unique business logic, creative 3D experiences, and advanced interactivity your clients need, rather than spending time wrangling 3D viewers into every theme variation. We’ve been there – it wasn't fun! 🥹 +**Need more power? Go Pro!** +Our Pro plan is built specifically for development teams building advanced 3D experiences: +* Access private TypeScript Vite project templates. +* Use any editor you want—VSCode, Visual Studio, XCode, etc. +* Host your codebase on Git for easy team collaboration. +* Integrate web game engines such as `ThreeJS`, `BabylonJS`, `PlayCanvas`, or others. +* Integrate other web-based packages or technologies as needed. +* Ensure quality with unit tests. +* Simple deployment process between local and production environments. +* Access our private `bits-pro` npm package to establish communication with the Shopify product page. - We currently use BabylonJS in 3D Bits app. All of the videos and viewer editor is based on it. + We currently use BabylonJS in the 3D Bits app whenever you use the Base plan. For anything else, you'll need to go Pro. --- @@ -113,7 +136,7 @@ Shopify offers three variant types with many options out of the box, which cover **Yes, if you or your team can write JavaScript or TypeScript.** -This is where the **BITBYBIT RUNNER** theme extension block truly shines. It acts as a bridge: +This is where our **Pro** plan really shines, but you can also use the **BITBYBIT RUNNER** theme extension block. It acts as a bridge: 1. You develop your complex configuration logic, part-swapping rules, and geometric manipulations as a script (e.g., using Rete, Blockly, or TypeScript on `bitbybit.dev` and then exporting it, or writing it directly for the runner). 2. The Runner block executes this script within your Shopify theme. 3. Your script can then interact with the 3D scene, listen to Shopify variant changes (or other custom UI elements you add to the page), and update the 3D model accordingly. @@ -131,9 +154,9 @@ This is where the **BITBYBIT RUNNER** theme extension block truly shines. It act ### Does 3D Bits offer fancy UI controls for product pages (like custom sliders, color swatches, etc.)? -**Nope. 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.** -There are many excellent Shopify apps and theme development techniques dedicated to creating sophisticated UI controls for product options. +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. 3D Bits focuses on the 3D visualization. It's designed to **listen** to what options are already selected on your product page (whether through standard Shopify variants or custom UI controls you've implemented) and then **update the 3D scene accordingly**: * Show the correct 3D model or parts. diff --git a/docs/learn/3d-bits/intro.md b/docs/learn/3d-bits/intro.md index 381876d9..90805714 100644 --- a/docs/learn/3d-bits/intro.md +++ b/docs/learn/3d-bits/intro.md @@ -1,5 +1,5 @@ --- -sidebar_position: 1 +sidebar_position: 0 title: "3D Bits: Enhance Your Shopify Store with 3D Product Visualization" sidebar_label: Intro description: Discover "3D Bits" our Shopify app designed to bring interactive 3D product configurators and visualization to your e-commerce store. @@ -8,15 +8,17 @@ tags: [shopify, 3d-bits] # 3D Bits: Interactive 3D Product Visualization for Your Shopify Store -## Revolutionizing 3D E-Commerce on Shopify +## What is 3D Bits? -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. +**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. -**Experience it Yourself:** -* Check out our **[Demo Store](https://bitbybit-dev-3d-configurators.myshopify.com)**. -* Use the password: `3d-bits-demo` +**Try it out:** +* Visit our **[Demo Store](https://bitbybit-dev-3d-configurators.myshopify.com)** +* Use password: `3d-bits-demo` -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. +## Why Use 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.