Table configurator

Prepare 3D Model

You can download the 3D table model directly from here to examine its center axis adjustments. By opening the model file in your preferred 3D software (e.g., Blender), you can inspect the pivot point placement and study how the center axis are positioned on each part (e.g. top surface, legs). A detailed review of the axis setup in this table model provides a valuable reference for implementing similar configurations in your own projects.

Download [table-example.glb]

When building a table configurator that allow size adjustments, two most common aspects must be taken into account during 3D model editing:

1. Table top surface edge profile

This means that when the tabletop has shaped edges, like rounded or angled edges rather than simple flat ones, you can’t just scale the entire top surface as a single piece without affecting the edge’s shape.

To keep the edges looking correct and consistent as the table size changes, you need to divide (or “cut”) the edges into separate sections on all sides. This way, when you scale the top surface, the edges can adjust properly without distorting their profile.

In other words, breaking the edges into segments ensures the detailed shape of the edges remains intact during resizing.

1. Table legs

It means that when you change the size of the table’s top surface, you don’t want to stretch or shrink the legs themselves because that would distort their shape. Instead, the legs should keep their original dimensions.

However, since the top surface is getting bigger or smaller, the legs need to move (change position) so they stay correctly aligned under the corners or edges of the resized top. So, the legs don’t change size, but their placement updates to match the new size of the table top.

This ensures the legs always look correct and are positioned properly relative to the top, no matter how much the top is scaled.

Build the configurator

Example of how to correctly set up the numeral variables for width, length, and height for tables

Create a new product by clicking the blue 'Add Product' button (ensure the 'Configurator' option is checked). Once the product is created, add the table’s 3D model from the 'Add 3D Models' tab, then create the size variables from the 'Create Options' tab. For more details, see the New Product chapter.

In the 'Create Options' tab, use the dropdown in the upper-right corner to select the Numeral block and create the first size variant, 'Width'. Click 'Add block' to add the Numeral block.

Before adding the Numeral block, assign it a title, choose the field type (in this case, 'Horizontal bar'), and then click 'Add Variant' to create the first size variant: Width.

Width

When you click 'Add Variant,' a popup window will appear where you can define the 'Width' variant. Enter a title for the variant (in this case, 'Width') and use the same name for the variant name ('width'). Then, in the 'Select 3D Model' section on the right, choose the 3D model you want to scale.

Next, select the 3D parts that will be affected by the block. In this case, we choose all parts.

To finalize defining the Width variant, we click 'Numerical' section and we do the following set-up:

1. Type of Value: select 'Size'

2. Show dimensions: check 'dimensions' if you want show the size in the front-end

3. Unit: select the unit measurements (in our case I'll choose 'cm')

1. Default value: type the original width size of the 3D model (e.g. 160cm)

2. Increment: the change in increment as we scale the table (e.g. 1cm)

3. Minimum value: the minimum width (e.g. 90cm)

4. Maximum value: the maximum width (e.g. 210cm)

1. Scaling on: in this case, I select the X-axis, which the table will scale along for the width

2. Position parts: we select the parts that will remain in place while the table scales in width along the X-axis.

Click 'Save' and add your first Numeral variant, Width.

Next, you can repeat this process to add two more variants: one for Length and another for Height. The steps are the same, except for the Title and the 'Numerical' section, where the setup differs. You will need to adjust the default, minimum, and maximum values, change the scaling axis (Z or Y), and select different position parts (fixed parts).

Length

Now, add the Length variant by clicking the blue 'Add Variant' button. In the popup, enter 'Length' for the title and variant name, then select all its 3D parts before configuring the Numerical settings.

In the Number settings, set up the length as follows:

1. Type of value, show dimensions and unit are the same as found above in Width.

2. Default value: we type the original mesh length (depth) of the table (e.g. 90cm)

3. Increment: the change in increment as we scale the table (e.g. 1cm)

4. Minimum value: type the minimum length of the table (e.g. 70cm)

5. Maximum value: type the maximum length of the table (e.g. 110cm)

1. Scaling on: in this case, I select the Z-axis, which the table will scale along for the length

2. Position parts: we select the parts that will remain in place while the table scales in length (depth) along the Z-axis

Click 'Save' and add the second Numeral variant, Length.

Click the 'Save' button again to save the entire Numeral block with its variants. Then, click 'Preview' to test the configurator and check if the table scales correctly in width and length.

Height

Finally, add the Height variant within the Numeral option block. The process is the same as for Width and Length, with differences in the title and variant name (use 'Height') and the Numerical settings.

There are different ways to define height, it could be the overall height of the table or just the thickness of the tabletop. Depending on which parts need to be scaled along the Y-axis, the correct parts must be selected. In our case, we will scale only the legs to increase the table's height.

Add another variant titled "Height". This time, select only the 3D parts that will be scaled, in our case, the legs.

In the Numerical settings, we keep the same settings for 'Type of value: Size', 'Show dimensions: checked', 'Unit: cm' and 'Default value: 90', 'Increment: 1', 'Minimum value: 70', Minimum value: 120', 'Scale on: Y axis' and leave 'Position parts' unselected. These values may vary depending on the type of table.

After clicking "Save", you should see three variants in the Numeral option block: Width, Length, and Height. Click "Save" again to update the entire Numeral option block, then click "Preview".

In Preview, the result should look similar to the image below. Test by changing the width, length, and height to ensure they scale correctly. If not, review the size variants to confirm they are set up properly, and verify you’ve followed all the steps on this page. If the sizes still don’t scale correctly, check that the 3D model’s center axis is positioned correctly, and update the model if necessary.

Add more options