ShapeDiver for Shopify | ShapeDiver Documentation

Official ShapeDiver App for Shopify

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

Demo store

A simple demo store can be seen here (password: shapediver).

Getting started

Install the ShapeDiver App for Shopify

Click here to install the official Shopify app in your store.

Setup and global settings

Please follow the steps in the app setup guide, which is shown in your store’s admin panel. Our Shopify app will ask you to start a subscription before the setup process can be finished. We offer a 14 day free trial, and if you are a Shopify Partner you can use the app for free on client transfer stores and dev stores.

Most of the setup is completed automatically by the App without requiring your intervention. Setup of your theme requires a bit of manual intervention, please refer to Shopify - Theme Setup - Basic for details about this.

Once you have completed the setup process, you can define global settings that you can apply to individual Shopify products. Read more about global settings here: Shopify - Global settings

Configuring App Builder for Shopify Products

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.

Configuring App Builder for a Shopify product — Click *More Actions → Configure ShapeDiver App Builder*

Read more about the available settings here: Shopify - Product Settings

Order fulfillment

Once your customers start ordering items configured using ShapeDiver App Builder, our Shopify app helps you to get these orders fulfilled. Read more about it here: Shopify - Order fulfillment

Advanced topics

Theme setup for custom titles and images

Please refer to Shopify - Theme Setup - Advanced

Controlling the configurator

The ShapeDiver App for Shopify exposes some functions on the global object of your storefront, that allow you to trigger actions in the configurator, or control the configurator modal overlay. As an example, you can implement custom JavaScript code to update parameter values, create model states, import model states, hide or show the configurator overlay, etc.

Object / function	Description
`configuratorManager` object	Used to control the configurator modal overlay
`setConfiguratorVisibility(visible: boolean)`	Set the visibility of the configurator modal overlay

`ecommerceApi` object	Used to communicate with the configurator
`peerIsReady`	A promise that resolves once the communication with the configurator has been established
`updateParameterValues`	Update parameter values. Supports updating parameter values for multiple sessions at once. Returns a promise that resolves once the update has been executed. See here for precise type definition.
`importModelState`	Import a model state. See here for precise type definition.
`createModelState`	Create a model state. See here for precise type definition.

Tutorial models

The following sections of our tutorial center contain models including this component:

Release notes

Please find release notes for our Shopify app here: Shopify - Release Notes

Subscribe to our newsfeed to stay up to date about new releases.