update 3d bits tutorials

Author: matas-bitbybit-dev

docs/docusaurus.config.ts

@@ -86,7 +86,7 @@ const config: Config = {
                     label: "Learn",
                 },
                 { to: "/learn/code/intro", label: "Code", position: "left" },
-                { to: "/3d-bits", label: "3D Bits", position: "left" },
+                { to: "/learn/3d-bits/intro", label: "3D Bits", position: "left" },
 
                 { to: "/blog", label: "Blog", position: "left" },
                 {

docs/learn/3d-bits/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "3D Bits Shopify App",
+  "position": 8,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/learn/3d-bits/intro.md

@@ -0,0 +1,41 @@
+---
+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.
+tags: [shopify, 3d-bits]
+---
+
+# 3D Bits: Interactive 3D Product Visualization for Your Shopify Store
+
+## Revolutionizing 3D E-Commerce on Shopify
+
+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.
+
+**Experience it Yourself:**
+*   Check out our **[Demo Store](https://bitbybit-dev-3d-configurators.myshopify.com)**.
+*   Use the 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.
+
+<div class="responsive-video-container">
+  <iframe 
+    width="560" 
+    height="315" 
+    src="https://www.youtube.com/embed/UwIEYWxlGQ0?si=ZtLRjdJ8t2DXjdjl" 
+    title="3D Bits App For Shopify Demo" 
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen>
+  </iframe>
+</div>
+
+## Why We Chose Shopify
+
+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":
+
+*   **Ease of Use:** Shopify is renowned for its user-friendly interface, making it simple for merchants to set up and manage their online stores.
+*   **Rich Feature Set:** It offers a comprehensive suite of tools and features essential for e-commerce success.
+*   **Flexibility and Customization:** The platform is highly flexible, allowing for extensive customization to meet diverse business needs.
+*   **Vibrant Ecosystem:** A large app store and developer community foster innovation and integration.
+
+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.

docs/learn/3d-bits/theme-app-extensions/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Theme App Extensions",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/learn/3d-bits/theme-app-extensions/bitbybit-preview.md

@@ -0,0 +1,75 @@
+---
+title: "BITBYBIT PREVIEW Block for Shopify's '3D Bits' App"
+sidebar_label: BITBYBIT PREVIEW
+description: Learn how to use the BITBYBIT PREVIEW theme app extension block in Shopify's "3D Bits" app to embed publicly available Bitbybit project scripts into your product pages.
+tags: [shopify, 3d-bits]
+---
+
+# The "BITBYBIT PREVIEW" Block for Shopify
+
+The **BITBYBIT PREVIEW** is a theme app extension block provided by our "3D Bits" Shopify app. It offers a straightforward way to embed **publicly available** Bitbybit project scripts directly into your Shopify product pages. This allows you to showcase rich, unique, and interactive 3D product experiences.
+
+**Key Characteristics:**
+*   **Embeds Public Scripts:** This block is designed specifically for embedding scripts from Bitbybit projects that have been published with "Public" visibility.
+*   **No Variant Configuration:** Unlike the [BITBYBIT RUNNER](/learn/3d-bits/theme-app-extensions/bitbybit-runner) block, experiences embedded with the PREVIEW block generally cannot be directly configured by Shopify product variants in the same dynamic way. The interaction is primarily with the pre-defined logic within the embedded Bitbybit script itself.
+*   **Showcasing Experiences:** Ideal for presenting completed interactive demos, artistic 3D scenes, complex visualizations, or non-configurable product showcases.
+
+**Live Example:**
+You can see an example of the BITBYBIT PREVIEW block in action on our [Demo Store Product Page](https://bitbybit-dev-3d-configurators.myshopify.com/products/towel-buckets-3dgs) (password: `3d-bits-demo`). This product directly embeds a script from this [public Bitbybit project](https://bitbybit.dev/projects/public/fA0SjbTlMGRei2zMuHuG/project-baskets-gaussian-splatting-by-author-bitbybit).
+
+![A Shopify product page showing an embedded 3D scene of towel buckets, powered by the BITBYBIT PREVIEW block.](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/bitbybit-embed-towel-bucket.jpeg "Demo store product using the PREVIEW block")
+*Demo store product that uses an embed of a Bitbybit public script.*
+
+## How Does the BITBYBIT PREVIEW Block Work?
+
+The process involves preparing your script on Bitbybit and then linking its preview URL within your Shopify product settings.
+
+### 1. Prepare Your Script on Bitbybit
+*   **Create/Select a Project & Script:** You'll need to have a project with at least one script created on the Bitbybit platform. (Ensure you are [signed up](https://bitbybit.dev/auth/sign-up).)
+*   **Publish as Public:** Once your script is complete, the project containing it **must be published and set to "Public" visibility.** This makes the script accessible via a shareable URL.
+    *   Learn more about managing projects and publishing: [Bitbybit Projects Overview](/learn/getting-started/basics/projects/intro).
+
+### 2. Get the Script's Preview URL
+You need the specific "preview" URL for your Bitbybit script. This URL runs the script in a full-screen, editor-less mode.
+*   **How to get the Preview URL:** Please follow our guide on [Obtaining Script Preview Links](/learn/start/general/script-preview-mode).
+
+### 3. Configure in Shopify ("3D Bits" App)
+
+Assuming you have already installed the "3D Bits" app in your Shopify store:
+
+*   **Product Template & Metafield Linking:**
+    1.  You'll typically create or edit a product template in your Shopify theme customizer.
+    2.  Add the **BITBYBIT PREVIEW** block from the "3D Bits" app to this template.
+    3.  In the block's settings, you need to dynamically link the **"Model Preview URL"** setting of the block to the product metafield named **"3D Bits Model Url"**. This metafield is provided by our app.
+
+    ![The BITBYBIT PREVIEW block settings in the Shopify theme editor, showing the "Model Preview URL" field dynamically linked to a product metafield.](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/bitbybit-preview-block.jpeg "Configured BITBYBIT PREVIEW block")
+    *After you configure the PREVIEW block, its settings should look similar to this.*
+
+*   **Enter the Preview URL in Product Metafields:**
+    1.  Navigate to the specific product in your Shopify admin where you want to display the 3D experience.
+    2.  Find the "Metafields" section for that product.
+    3.  Locate the **"3D Bits Model Url"** metafield.
+    4.  Copy the preview URL you obtained from Bitbybit and paste it into this metafield.
+
+    ![The Shopify product admin page showing the "3D Bits Model Url" metafield with a Bitbybit preview URL pasted into it.](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/bitbybit-model-preview-url-metafield.jpeg "Entering the preview URL in the product metafield")
+    *Use the "3D Bits Model Url" metafield to enter the preview URL from Bitbybit.*
+
+    The other metafields provided by the "3D Bits" app (like those for GLB files or script content) are generally not relevant for the BITBYBIT PREVIEW block, so you can ignore them when using this specific block.
+
+## Video Tutorial
+
+For a step-by-step visual guide on setting up the "3D Bits" app and its blocks, including the PREVIEW block, be sure to check out this video tutorial:
+
+<div class="responsive-video-container">
+  <iframe 
+    width="560" 
+    height="315" 
+    src="https://www.youtube.com/embed/9l7run2qy0Q?si=j8uSScxl6ncJaX81" 
+    title="3D Bits App For Shopify Fast Introduction" 
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen>
+  </iframe>
+</div>
+
+By following these steps, you can effectively use the BITBYBIT PREVIEW block to enrich your Shopify product pages with engaging, interactive 3D content hosted on Bitbybit.

docs/learn/3d-bits/theme-app-extensions/bitbybit-runner.md

@@ -0,0 +1,39 @@
+---
+title: "BITBYBIT RUNNER Block for Shopify's '3D Bits' App"
+sidebar_label: BITBYBIT RUNNER
+description: Learn how to use the BITBYBIT RUNNER theme app extension block in Shopify's "3D Bits" app to integrate parametric 3D models and interactive scripts from Bitbybit into your product pages.
+tags: [shopify, 3d-bits]
+---
+
+# The "BITBYBIT RUNNER" Block for Shopify
+
+The **BITBYBIT RUNNER** is a theme app extension block provided by our "3D Bits" Shopify app. It offers powerful functionality to import scripts created in Bitbybit editors and link them with your Shopify product variants and custom line item properties. This enables dynamic, parametric 3D product configurators directly on your product pages.
+
+This block is the most versatile and powerful option within the "3D Bits" app. However, mastering its usage requires a good understanding of parametric 3D model scripting and potentially some CAD concepts. If you are not familiar with these areas, we recommend:
+*   Hiring a developer experienced with 3D web technologies.
+*   Contacting us for a quote on our professional services to help you with the setup.
+
+![An example of a customizable Shopify product page featuring a 3D table. The BITBYBIT RUNNER block powers the interactive 3D model.](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/bitbybit-dev-3d-bits-app-configurable-table-product.jpeg "Customizable product page using the RUNNER block")
+*Example of a customizable product page with a 3D table, where the RUNNER block is being used.*
+
+The BITBYBIT RUNNER block allows Shopify merchants to present parametric 3D models and interactive experiences that have been scripted using the editors on [bitbybit.dev](https://bitbybit.dev). It seamlessly integrates a 3D canvas into your product page. Our app intelligently listens for changes in various input values on the page (like dropdowns for variants, or custom input fields) and sends these values to your "smart" Bitbybit script. Your script can then use these inputs to adapt and update the 3D model in real-time.
+
+**Is the RUNNER Block Right for You?**
+
+*   **If your products are simple, static, and not meant to be customized parametrically:**
+    The RUNNER block might be more than you need. In such cases, we encourage you to explore our other "3D Bits" app blocks:
+    *   [**BITBYBIT VIEWER**](/learn/3d-bits/theme-app-extensions/bitbybit-viewer): Ideal for displaying one or multiple static 3D models on your product page without needing to use the Bitbybit editors.
+    *   [**BITBYBIT PREVIEW**](/learn/3d-bits/theme-app-extensions/bitbybit-preview): A great option if you want to embed a publicly available script from the Bitbybit platform directly into your product page.
+
+## How Does the BITBYBIT RUNNER Block Work?
+
+While we offer several [tutorials to guide you through the specifics](/learn/3d-bits/tutorials/intro), the core principle is straightforward:
+
+1.  **Create Your Script:** Design and code your parametric 3D model or interactive experience using one of the editors (Rete, Blockly, or TypeScript) on the [bitbybit.dev](https://bitbybit.dev) platform.
+2.  **Export Your Script:** Use the "Export to Runner" feature within the Bitbybit editor to generate JavaScript code from your visual or TypeScript program.
+3.  **Integrate in Shopify:** Copy this exported JavaScript code and paste it into the designated field within the BITBYBIT RUNNER block settings in your Shopify theme editor.
+4.  **Link Inputs (Optional but Powerful):** Configure the block to link Shopify product variants or custom line item properties to specific input parameters defined in your Bitbybit script.
+
+This process allows merchants to first define their adaptable 3D designs on Bitbybit, choosing from low-code visual programming editors or our TypeScript IDE. Then, they can bring this dynamic logic into their Shopify store via the "3D Bits" app, creating truly interactive product customization experiences for their customers.
+
+For more detailed instructions and examples, please follow the tutorials available on our [Shopify Start Pages](/learn/3d-bits/tutorials/intro).