sidebar_position

title

Tutorial: Creating a Parametric Palm Table Configurator for Shopify

sidebar_label

Product - Palm Table

description

Learn to build an advanced 3D palm table configurator for Shopify, combining 3D scans, parametric CAD models, product variants, and custom Liquid UI elements with "3D Bits".

Tutorial: Creating a Parametric Palm Table Configurator for Shopify

What You Will Learn: Advanced 3D Configuration

This tutorial takes you a step further, demonstrating how more complex Bitbybit scripts can be integrated into your Shopify store using the "3D Bits" app. We will use a pre-prepared parametric palm table script and show you how to:

Integrate it into your Shopify product page.
Combine 3D scans with parametric 3D CAD models.
Link script parameters to Shopify product variants.
Create and use custom Liquid UI elements (as line item properties) for more granular product configuration.

View the Demo:

Check out the live example on our Demo Store: Palm Table Product Page.
Demo store password: 3d-bits-demo

3D Palm Table Configurator Example

Video Tutorial: Building the Palm Table Configurator

Key Concepts Covered

Setting Up Product Variants

Shopify variants allow you to offer different versions of a product (e.g., different sizes, colors, materials). Each variant can have its own price, SKU, and inventory. In this tutorial, we'll use variants to control aspects like the number of legs for the table and potentially assign custom pricing based on these selections.

Custom Liquid UI Elements for Line Item Properties

While variants are great, sometimes you need finer control over product configuration. Custom Liquid UI elements, implemented as line item properties, allow you to add sliders, dropdowns, checkboxes, and other custom inputs to your product page. Customers can use these to configure product details that might not be covered by standard variants.

Important Note on Pricing with Line Items: Line item properties in Shopify cannot directly affect the product's base price. If you need custom UI elements that dynamically change the price, you would typically need to use a third-party Shopify app designed for complex pricing rules and attempt to integrate the "3D Bits" app with it. We cannot guarantee compatibility, but as long as the inputs generated by such apps have name attributes, our app should be able to pick up their values.

How to Create a Custom Liquid Form for Line Items

Create a Metafield for Liquid Code:
- You'll need a product metafield to store your custom Liquid code. You can name the metafield descriptively (e.g., "Custom Product Options").
- The key for this metafield must be custom.liquid-custom-line-items. The video tutorial explains how to set this up.
Liquid Snippets: You'll typically use two Liquid snippets:
- Snippet 1: Context and Form Identification (Add to your theme's product form Liquid file, e.g., main-product.liquid or a custom section): This snippet sets up the context and helps identify the product form for our app. (The exact implementation of this "magic" might vary or be handled by the "3D Bits" app's block itself. The video tutorial will provide the precise method.)

{% assign product_form_id = 'product-form-' | append: section.id %}
{% assign replaced = product.metafields.custom.liquid-custom-line-items | replace: "{{product_form_id}}", product_form_id %}
{{replaced}}

*   **Snippet 2: The Form Itself (Paste into the `custom.liquid-custom-line-items` product metafield):**
    This snippet defines the actual HTML for your custom UI elements. Here's a conceptual example for controlling table dimensions:

```html
<style>
    label {
        margin-top: 20px;
    }
    input {
        width: 100%;
        max-width: 440px;
    }
    input[type='text'] {
        height: 40px;
        padding: 20px;
        -webkit-user-select: text;
    }
    ::selection {
        background-color: #ffffff;
        color: #000000;
    }
    input[type='range'] {
        margin: 0px;
        appearance: none;
        background-color: #000000;
        color: #000000;
        height: 2px;
        border-radius: 0.5vmin;
    }
    input::-webkit-slider-thumb {
        cursor: pointer;
        appearance: none;
        width: 1vmin;
        height: 1vmin;
        background: black;
    }
</style>

<p class="line-item-property__field">
<label class="form__label" id="height-range-label" for="height-range">Height</label>
<input
    id="height-range"
    form="{{product_form_id}}"
    name="properties[Height]"
    type="range"
    min="0.1"
    max="1.5"
    value="1"
    step="0.1"
    class="slider"
/>
<label class="form__label" id="leg-thickness-range-label" for="leg-thickness-range">Leg Thickness</label>
<input
    id="leg-thickness-range"
    form="{{product_form_id}}"
    name="properties[Leg Thickness]"
    type="range"
    min="0.1"
    max="0.4"
    value="0.2"
    step="0.05"
    class="slider"
/>
</p>
<script>
    setTimeout(() => {
        setupUpdates('height-range', 'Height: ');
        setupUpdates('leg-thickness-range', 'Leg Thickness: ');
    });

    function setupUpdates(id, label){
        const value = document.querySelector(`#${id}-label`);
        const input = document.querySelector(`#${id}`);
        value.textContent = label + input.value;
        input.addEventListener('change', (event) => {
            value.textContent = label + event.target.value;
        });
    }
</script>
```

The Bitbybit Script (Rete)

To save you time, here is the embedded Rete script used in this tutorial for the parametric palm table. You can explore it here and then use the "Export to Runner" feature in the Bitbybit editor to get the JavaScript code for your Shopify BITBYBIT RUNNER block.

Important Note on Mobile Devices

Scripts that involve complex geometry calculations or many detailed 3D models can be resource-intensive. Some mobile devices, particularly older models or iPhones (due to Safari's memory limitations for browser tabs), might struggle to run very heavy scripts. If the script exceeds the available memory, the browser tab may restart or crash.

Please take this into account when designing your scripts, especially if a significant portion of your audience uses mobile devices. Test your configurators thoroughly on various devices.

This tutorial provides a glimpse into creating more advanced 3D product configurators for Shopify by combining Bitbybit's parametric capabilities with Shopify's variants and custom Liquid UI elements.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tutorial: Creating a Parametric Palm Table Configurator for Shopify

What You Will Learn: Advanced 3D Configuration

Video Tutorial: Building the Palm Table Configurator

Key Concepts Covered

Setting Up Product Variants

Custom Liquid UI Elements for Line Item Properties

How to Create a Custom Liquid Form for Line Items

The Bitbybit Script (Rete)

Important Note on Mobile Devices

FilesExpand file tree

product-palm-table.mdx

Latest commit

History

product-palm-table.mdx

File metadata and controls

Tutorial: Creating a Parametric Palm Table Configurator for Shopify

What You Will Learn: Advanced 3D Configuration

Video Tutorial: Building the Palm Table Configurator

Key Concepts Covered

Setting Up Product Variants

Custom Liquid UI Elements for Line Item Properties

How to Create a Custom Liquid Form for Line Items

The Bitbybit Script (Rete)

Important Note on Mobile Devices