ShapeDiver for Shopify

Official ShapeDiver App for Shopify

If you want to create an eCommerce website using Shopify, we will soon provide a Shopify plugin based on App Builder. Create your ShapeDiver App entirely in Grasshopper without writing any code. The App can then be used directly inside a shop created with Shopify and opens as an overlay on the product page. With App Builder's custom “Add To Cart” action component, users can play with the configurator and add their configured product to the cart directly.

This feature will be released soon! Contact us if you are interested in trying it early.

Setup of the Shopify App

Please follow the steps in the app setup guide, which is shown in your store’s admin panel.

Configuring App Builder for Shopify Products

Once the ShapeDiver App for Shopify is installed, use your Shopify store’s admin panel to configure App Builder configurators for your products. In the admin panel, navigate to Products, open a product, and click More Actions → Configure ShapeDiver App Builder.

The following dialog opens, showing settings that can be configured:

This table contains a description of all available settings:

Setting	Description
Slug	You can reference your ShapeDiver app either using its slug, or a ticket and model view URL. The slug is the last part of the URL of your model. You can leave this empty if you provide ticket and Model View URL. Make sure to whitelist the domain of your store, and to enable iframe embedding for your model.
Ticket	A ticket for embedding for your ShapeDiver model. If you specify a ticket, you also need to specify the model view URL of your model. You can leave this empty if you provide a slug. Make sure to whitelist the domain of your store, and to enable direct embedding for your model.
Model View URL	The model view URL of your ShapeDiver model. If you specify a model view URL, you also need to specify a ticket for embedding for your model. You can leave this empty if you provide a slug.
Model State ID	An optional model state ID of your ShapeDiver model. If left empty, the model's default state will be used. Read more about model states here.
Configurator URL	Optional configurator URL for this product. If left empty, the default version of ShapeDiver App Builder will be used, which is https://appbuilder.shapediver.com/v1/main/latest/
Settings JSON URL	Optional URL of the JSON file defining the App Builder settings of the configurator. Use this to configure the theme to be applied to App Builder. This can be a relative or absolute URL. Read more about customizing the theme here. You can use Shopify’s file upload feature to host these JSON files.

After saving the settings for a product for the first time, the configurator will be disabled by default, which means the Configure button will not show up on the product page yet. Click Enable Configurator to activate it.

If you preview a product in the theme editor, the Configure button will show up regardless of whether the configurator is enabled or not.

Third-party Shopify integration

Our partners at New Branch have developed a ShapeDiver integration for Shopify called Product Lab. Contact them if you are interested in getting started with your shop now! The setup might require some custom development to match your theme and requirements.