The Modelup platform supports an input type called Stack Grid. Similar to a dropdown, a Stack Grid presents a fixed set of selectable options. The difference is that each option can also include a thumbnail image, making it easier for users to recognize and choose visually.

When you click on the component in the UI, the available options are displayed in a grid layout with their corresponding images.

This guide explains how Stack Grids are created and how they can be used.

Example configurator

The configurator below demonstrates a Stack Grid component. In this example, the user can select different geometric shapes:

• Sphere
• Box
• Torus

Each option is displayed with a thumbnail that shows what the shape looks like. Clicking an option selects it.

👉 Try the live configurator here: https://configurator.modelup3d.com/?projectId=Vex5Vk3i&token=eyJhbGciOiJIUzI1NiJ9.eyJ2NW4iOjEsImlkIjo0MSwicDdkIjoiVmV4NVZrM2kiLCJwOXMiOlsiYzVlIiwicl9jMTVhIl19.r7JJ_rRtusAjq8dtK41H2D3mVH0FIplYHACYBaJZ-Hs&configurationState=a_bac30acd-5b62-4f81-ab5f-c9a42bebd8d1_shape_0_cb43b9a4-2031-4b29-b402-867930188ea8_1

Grasshopper definition

The underlying Grasshopper definition for the example above is built as follows:

• The base component is a ValueList component with three options: sphere, box and torus.
• Convert the ValueList into a Stack Grid using:
  • ValueList Style component:
    • Connect the VL input to the ValueList.
    • Set the S input to "Stack grid".
  • Image Value List component:
    • Connect the VL input to the ValueList.
    • Connect the I input to a list of publicly accessible SVG URLs to use as thumbnails. (More about the format below). Note that the list of URLs must match the number of items in the ValueList connected to the VL input.

Example definition.