ShapeDiver is an online platform used by businesses across different industries, such as AEC, Automotive, Furniture, and Jewelry, to create online tools like 3D product configurators. These tools help them automate tasks related to their sales, design, or manufacturing workflows. While ShapeDiver can be used to create more than just 3D product configurators, the process in all cases is very similar to the steps presented in this guide.

Just like YouTube is an online platform for hosting and sharing video files, where users upload the videos they record with their phones or professional cameras, ShapeDiver is an online platform for hosting and sharing Grasshopper files, where users upload the Grasshopper files they create with their laptops or workstations. This way, other stakeholders, such as clients or colleagues, can access them without needing to have a specific software license or Grasshopper experience. If you're unfamiliar with Grasshopper files, we suggest checking out this page here.

Our platform leverages the benefits of parametric design to make creating and maintaining 3D product configurators simple and cost-effective for businesses. It does this by automatically translating Grasshopper files into cloud applications that can be embedded into any external website and connected to external systems such as eCommerce platforms, inventory systems, or databases. This greatly expands the reach and usefulness of Grasshopper files, as it allows non-technical stakeholders to access the power of these files via any web browser.

This guide will walk you through the three steps to create your first online 3D product configurator using ShapeDiver. Let’s get started!

Step 1: Creating the Right Grasshopper File

The first step in creating a 3D product configurator using ShapeDiver is to create the right Grasshopper file according to the type of product you want to offer. The Grasshopper file is the foundation of your online configurator and must be created with care to ensure the best user experience. Therefore, it must follow the guidelines and best practices shared in our documentation and video tutorials for the best results.

If you don't know how to create a Grasshopper file, don't worry! You have several options to get started:

a) You can learn Grasshopper yourself by watching tutorials on YouTube or anywhere else on the Internet. This is by far the most “affordable” way of creating your Grasshopper files. However, depending on your CAD design experience, it could take some time to master Grasshopper to the level needed to create a file compatible with ShapeDiver.

b) Another option is to hire a freelancer. Grasshopper is widely popular, and plenty of freelancers would gladly use their skills to help you build your Grasshopper files. However, you are responsible for finding the right Grasshopper expert, and the quality of the file will depend on this expert following all of our guidelines and best practices. This option can also be quite affordable, but it might also take time if your Grasshopper expert is not familiar with ShapeDiver or if you have to hire multiple ones before you find the right one.

c) Finally, you can reach out to our team to build the Grasshopper files for you. We offer professional services associated with Grasshopper, including optimization, consultation, and development services. If you need to get your Grasshopper files right on the first try and time is of the essence, then our team is here to help. We have more information on Our Professional Services page, so check it out if interested.

Please note that this is the most important step in this whole process! If your Grasshopper file is slow, buggy, or doesn’t render properly, this will affect your 3D product configurator with ShapeDiver. In other words, the end result will only be only as good as the initial input!

With the Grasshopper file out of the way, the next step is to choose the right ShapeDiver plan for your project.

Step 2: Choosing the right ShapeDiver plan

While you can start testing your Grasshopper files with a Free plan (you can create one here), you'll find that you won't be able to use some key features, such as scripted components, import/export data, or embedding on external websites. In this case, you'll need to start a trial of any of our paid plans.

We offer different options according to your website integration requirements, Grasshopper file complexity, and predicted monthly usage of the 3D product configurator on your website. Our Pricing page has a comparison table that summarizes each plan's features, which can come in handy when deciding between two or more of our options.

Below, we'll focus on three of our most popular plans: Designer, Designer Plus, and Business. They are part of a shared server system based in Frankfurt, Germany. If you're interested in having your own private system located near you, our sales team will happily explain our Enterprise plan to you over a video call.

Designer Plan

The Designer plan is our most affordable offering, and it's usually the right choice for early entrepreneurs or small businesses with tight budgets. This plan includes iframe embedding, a very simple way to integrate our 3D viewer and standard UI into your website, including the ability to generate data such as technical drawings and production files for CNC or 3D printing.

The two most important restrictions to pay attention to with this plan are the computation time, up to 10 seconds, and the lack of API access, which means online configurators created with this plan can not connect to external systems or have custom frontends.

Some great examples of clients using this type of plan are:

- Birdhouce | Furniture

- Web Shaping Bay | Surfboards

Designer Plus Plan

The Designer Plus plan includes all of the features offered in the Designer plan and then adds Viewer API access and larger file size export limits. Our Viewer API is the perfect solution for those businesses who need a custom frontend for their 3D product configurators or to connect them to external systems, such as eCommerce platforms like Shopify or WooCommerce. Additionally, it allows the creation of advanced interactions with our viewer, such as clickable and draggable elements, which greatly increases the overall UX of an online configurator.

We have plenty of documentation on this topic, plus an in-depth video tutorial series on our Viewer API. Needless to say, you'll need at least some web development knowledge to truly make the most out of our Viewer API. If you need help in this area, we recommend looking for a local web developer with knowledge in JavaScript, TypeScript, HTML, CSS, etc., or browsing through our recommended Web Development Partners page.

The main constraint to pay attention to with this plan is the computation time, which is still kept at up to 10 seconds, just like the Designer plan, although it can be increased to up to 30 seconds if needed.

Some great examples of clients using this type of plan are:

- Ecale | AEC

- Aectual | Interior Design

Business Plan

The Business plan is the top-of-the-line offering within our shared server system. It includes all features offered in the Designer Plus plan, plus adds Geometry Backend API access, up to 30 sec. of computation time by default, private support, and more.

The key feature of this plan is the inclusion of our Geometry Backend API. Unlike our Viewer API, which requires an active viewer session to communicate with your Grasshopper files in our servers, this advanced API allows your web development team to build more complex workflows by communicating with our servers directly without having to go through our viewer. If your online application requires it, you can check out our documentation and this video tutorial.

Some great examples of clients using this type of plan are:

- BigRep | Industrial 3D Printing

- Dish | Kitchen Design

For a more detailed look at our prices and features, including our Enterprise plan, please check our Pricing page, including our FAQ at the bottom of the page, as it explains important concepts such as monthly credits, seats, and support.

Now that you’ve chosen the right ShapeDiver plan and your Grasshopper files are hosted online, the third and final step is to integrate your models into your website.

Step 3: Integrating Everything into Your Website

The last and final step before you can successfully complete a ShapeDiver 3D product configurator involves embedding our viewer into your website and connecting it to a custom front end and/or any other external systems (if needed). Please note that depending on the type of integration you choose, you might need the help of a web developer.

If you choose iframe embedding, a feature included with all paid plans, integrating your models into your website is as simple as copying and pasting the automatically generated embed code of any of your ShapeDiver models. It can literally be done in under 1 minute.

If you choose direct embedding, included with Designer Plus and above, you or your preferred web development team will use our Viewer and/or Backend APIs to create the perfect integration. This includes advanced concepts like animations and clickable elements, plus connecting your models to:

- A custom frontend

- An eCommerce platform like Shopify, WooCommerce, Prestashop, etc.

- Inventory systems and other types of databases

If needed, our team can take over some of the more advanced API-related tasks, like draggable and clickable elements, so your team can focus on the website development aspect of your project. For more information on this, please refer to the API Development Services on our Professional Services page.

Finally, we provide plenty of video tutorials and documentation covering how to properly use our various tools, such as our Grasshopper plugin and APIs, so make sure you and your team explore these resources. When in doubt, use our Support Forum to receive qualified and cost-free assistance from our development team.

Takeaways

In conclusion, building an online 3D product configurator with ShapeDiver is an excellent option for those businesses that want to keep control of the development process and move at their own pace. These online applications can help automate different processes, such as sales, design, or manufacturing, by leveraging the power of parametric design via Grasshopper.

To have a complete overview of our different plans and professional services, check our Pricing page. If you want to discuss a project with our team, use the contact request form on our website, and our sales team will be happy to schedule an introduction call with you.