Ecommerce Integrations

Dopple is designed to be easy to implement on a variety of ecommerce platforms, such as Shopify, BigCommerce, and more.

Because each platform has its own way of handling ecommerce functionality — such as inventory management, pricing, order fulfillment, CPQ engines, and more — Dopple deliberately only handles the final display of the 3D products on the frontend.

In other words, you are free to use any platform of your choice and add Dopple to it!

Official Integration Guides

We provide official guides on how to integrate Dopple into the following platforms:

Custom Integrations

While ecommerce platforms can vary in how they define products and variants, the general pattern for integrating Dopple into a site typically follows the same pattern:

Create the products in your platform.

Add as many products as you need, along with any non-Dopple-related information for each product too, such as prices, inventory, or SKU data.
Define the variants (i.e. the configuration options) for each product.

For example, a sofa product may have variants for the fabric or color, and each variant may have a number of different options within them.
Map the products and variants to their corresponding Dopple values.

Depending on the platform, there may be built-in ways to add this data to the each product/variant as metadata. Otherwise, you may use third-party metadata plugins for your platform or hardcode a JSON mapping directly into your page.
Add a canvas to your HTML to display the 3D product.

Include a <canvas> element in your product page’s HTML along with the Dopple SDK script to initialize the 3D product on your page. See Basic Usage for more info.
Add event listeners to the options in your UI to update the 3D product when selected.

Listen for any changes to the configuration options in your UI, and call updateSelection() on your 3D product with any new values from the variant mapping. See Product Configuration for more info.

Mapping Products and Variants

A “variant mapping” is a JSON-like object that connects the values used by your platform to the values used within your Dopple product.

const productVariantMap = {
  color: {
    "Aqua Marine": "main_color_aqua",
    "Crimson": "main_color_crimson",
    "Jet Black": "main_color_jet_black",
  },
  size: {
    "Small": "size_sm",
    "Medium": "size_md",
    "Large": "size_lg",
  }
};

Then, when a user selects an option in the UI, the corresponding values can be found in the map and updated on the 3D product.

<select id="color-select">
  <option value="Aqua Marine">1: Aqua Marine</option>
  <option value="Crimson">2: Crimson</option>
  <option value="Jet Black">3: Jet Black</option>
</select>

document.getElementById("color-select").addEventListener("change", (event) => {
  // Get the corresponding value from the map
  const value = productVariantMap.color[event.target.value];

  // Update the "color" property within the 3D product with the new value
  if (value && dopple) {
    dopple.updateSelection({
      color: value
    });
  }
});

This is especially useful when an option in the UI is different than the value used within the 3D product, or when multiple properties need to be updated at once when the user selects a single option.

Mapping Multiple Properties

In some cases, you may need to update multiple properties at once when a user selects an option, such as when showing “presets” for your users to pick from or having a “reset” button. In these cases, you may want to structure your map to include multiple property/option pairs under each configuration option.

const productVariantMap = {
  color: {
    "Aqua Marine": {
      "main_color": "aqua",
      "secondary_color": "aqua",
      "accent_color": "white",
    },
    "Crimson": {
      "main_color": "crimson",
      "secondary_color": "crimson",
      "accent_color": "black",
    },
    "Jet Black": {
      "main_color": "jet_black",
      "secondary_color": "jet_black",
      "accent_color": "white",
    }
  }
};

Then, when a user selects one of those options in the UI, you can loop through each value for the corresponding item in the map and update it on the 3D product.

document.getElementById("color-select").addEventListener("change", (event) => {
  // Get the corresponding array of properties/options from the map
  const values = productVariantMap.color[event.target.value];

  // Update the 3D product with the new value
  if (values && dopple) {
    dopple.updateSelection({
      ...values
    });
  }
});