This is a guide on how to set up, configure, and integrate Dopple Visual into a Magento site.
In this guide, we’ll use a demo product called the “Arrow Purse” as an example, but your product’s assets and configurable properties should be substituted in during your integration.
This guide assumes the following prerequisites are met:
- Content has been created in the Dopple Visual platform. Your unique client ID, as well as the product namespace and name are known.
- Your Magento site has been added as an approved domain by Dopple.
- You have access to the product.
- You have administrator rights to access the Magento dashboard and modify the site’s files.
To create a configurable product, we will need to:
- Create Magento attributes which will be assigned to Dopple attributes
- Create an attribute set for the product
- Configure attribute mapping (assign Dopple attributes to Magento attributes)
- Create configurable and simple products
Setting up Magento product attributes
The first step will be to set up Magento properties related to Dopple properties. Navigate to Stores > Attributes > Product > Add new attribute and enter in your product’s properties and values.
Property values must be related to Dopple attribute values. For example, the Arrow Purse demo product in this guide has been set up to accept the following values for the purse’s color, material, and metal finish properties:
In Magento, these values may be set in the Properties tab under Attribute Information:
Not sure where to find the properties and values available for your product? The configurability matrix provided to you by Dopple will have everything laid out, for easy reference.
Next, under Advanced Attribute Properties, set the Scope to Global, then save the newly created attribute.
Setting up the catalog input type
The catalog input type defines the way the customer can select the various configurable options, such as through dropdown menus or buttons in your UI. There are 3 available types to choose from:
- Text swatch
- Visual swatch
After setting up the catalog input type, you will need to flush the Magento cache in System > Tools > Cache Management > Flush Magento Cache.
This will create a
<select> dropdown menu on your product detail page for users to choose an option from.
This will create a list of buttons with text on your product detail page. Users can select an option by clicking one of the buttons.
This will create a list of buttons with images or solid colors on your product detail page. Users can select an option by clicking one of the buttons.
As an admin, you can define an image or a color (given by a picker or RGB/HSW/HEX codes) for each button.
Creating an attribute set for the product
After creating the Magento attributes above, we will need to create new attribute sets.
Navigate to Stores > Attributes > Attribute sets > Add New Attribute set and enter the name for your new attribute set. For this example with the demo purse product, we will use
After clicking Save, an attribute group can then be set up. Then, move your newly created attributes into your product details group, then click Save.
Mapping the attribute to Dopple properties
Next, we need to create a “mapping” of each of these attributes to their respective properties on the 3D product in order to tell Dopple Visual how to update the 3D scene when a user selects a new option.
Navigate to Stores > Settings > Configurations > Dopple Configuration to configure Dopple Visual for your site.
This will enable Dopple Visual on Magento.
- Client ID
Enter your unique client ID provided to you by Dopple.
- 3D View Icon
Upload an icon/image to display on the thumbnail image of your product to switch to 3D view.
- Attribute Mapping
Assign Dopple attributes to their corresponding Magento attributes. The name of Dopple attributes must be the same as in mapping JSON.
Creating a configurable product (parent)
Navigate to Catalog > Products > Add Product, enable the product, and select the attribute set created earlier (in this example, we created the
Purse_demo attribute set), then click Save. You may also configure any other product details here as well, such as SKU number or price.
If you don’t see your attribute set in the dropdown, go to System > Tools > Cache Management and click on Flush Magento Cache on the top right.
Next, under Images and Videos, add any photos or renders of your product.
Finally, under the Dopple Visualization Tool section, enter your product name, namespace, and mapping JSON data. This section can also set if the interactive 3D view should be the default view for the product, as opposed to a static image.
For the mapping JSON, make sure that the text is valid JSON. Any invalid JSON data will be cleared after saving the product. Using a JSON linting tool will help ensure your data is correctly entered.
Create simple products (child)
We need to create the three variants defined in the mapping JSON earlier under
- Variant1: Red - Leather - Silver
- Variant2: Blue - Leather - Silver
- Variant3: Blue - Crocodile - Gold
In this example, we also have two additional variants not defined in mapping JSON:
- Red - Crocodile - Silver (all attributes defined in mapping JSON)
- Yellow - Crocodile - Gold (yellow not defined in mapping JSON)
Next, under the Configurations section click Create Configurations.
Then, select the Magento attributes (which were assigned to Dopple attributes earlier under Dopple Configuration), then click Next.
On the Attribute Values step, select the options to use in configurations, then click Next.
In Step 2, these attributes may be reordered by clicking and dragging the group of 8 squares at the top left corner of each box next to the attribute name. By default, attributes will be presented in alphabetical order.
On the Bulk Images & Price step, you may skip image uploading or price/quantity changes at this time if you wish.
In Step 3, if there is no initial quantity and a price in a simple product, Magento will interpret this as being not in inventory and your product will not appear in the catalog or in search. When testing a new product, ensure that the quantity and price are set temporarily to avoid this.
Lastly, on the Summary step, confirm that all the variations derived from values are listed, then click Generate Products.
The system will automatically generate all the possible variants from given values. However, for this example product we need only the five variants described above, so the other variants may be removed/disabled, before clicking Save to apply changes.
After the simple products have been auto-generated, there is a column to the right called Dopple Variant. If things are set correctly, you will see the variant for every simple product. If you see “No Dopple Variant” that may indicate that there is an error in the JSON mapping.
The five configurable products are now completed: three have Dopple variants, and two don’t. As an admin, you may also set price, quantity, and upload photos to all variations individually after opening the variant details page by clicking on its name.