How to Set Up and Use the 3D Model Preview in Our Shopify App
Our 3D Model Preview lets you offer customers an interactive, 3D representation of your customizable products. This guide will walk you through everything you need to know, from uploading 3D models to integrating the preview into your Shopify store products.
Required 3D Model File Structure for Integration with the App
There are many different file formats available for 3D model making. For the 3D Model Preview in our app, we use FBX files for the model itself and HDR files for the environmental lighting. To properly work with our app’s structure, the FBX model file needs to meet specific structural requirements regarding the meshes (the triangular structures that create the 3D elements). Here's what you need to know:
File Structure Requirements:
Base Mesh Structure: This represents the overall structure of the product. It can be just one mesh creating the whole product structure or a combination of multiple meshes if this will work better for your product structure.
Customization Mesh (Custom Area): The parts of the product that should show the customized areas will need additional meshes for each view of the customization you are planning. The first of these meshes needs to be named “custom” so that our app can identify it and apply the customization correctly. Each subsequent view will need its own mesh being named “custom_1”, “custom_2”, etc.
Make sure that your 3D model file consists of:
At least one mesh for the base product.
At least one mesh for the customizable area.
You can check the structure of your file with the online 3D viewer.
Uploading a 3D Model to the App and Setting Up the Variables
You can upload your 3D models to the Model Manager, which is found in the 3D Models section of the Advanced Settings. To begin using the 3D Model Preview feature on a product, you’ll need to upload your FBX model file to the Model Manager.
We offer a default environmental map that will automatically used for the lighting on your models. Should you wish to upload your own lighting map file you can do that as well. It needs to be an HDR file for our app to recognize it properly.
Steps to Upload and Set Up Your 3D Model:
Create a New Model: Enter a title for your new model in the bottom right corner of the page and click “Create”.
Upload the FBX Model File: This file should include your product model and any relevant customization areas.
Upload the HDR Environmental Map: If you want to use your own HDR lighting file you can upload it now. If not, you can just use the default lighting map provided by the app.
Set Up Print Area Sizes: Enter the size of the customization area prepared in your 3D model file.
Adjust Camera Distance and Model View: Set the camera distance to ensure the 3D model displays properly. You can also adjust the Material Metalness and Roughness.
Save: Don’t forget to save your changes to each model individually.
Setting Up the Product Customization and Connecting the 3D Model
Once your 3D model is uploaded, it’s time to set up the customization for the product.
Steps for Customization Setup:
Create a New Customization: In the Customizations tab of the app, create a new customization and prepare the views in the Product Builder as usual. (For more details, refer to our article on customization setup.)
Match Aspect Ratios: Ensure that the aspect ratio of the printing box in your customization matches the aspect ratio of the print area of the 3D model. This is needed to correctly display the customization on the 3D preview.
Connect the 3D Model: After setting up the customization, return to the Customizations tab and open the Product Options (second button on the right side) for your new customization. Here, you can link the uploaded 3D model to the customization.
If you're linking a 3D model to a customization with a colored layer, it’s helpful to know the structure and naming of your 3D model meshes. You can enter the name of the mesh representing the colored element into the “Color Link 3D Layer” input field in the Product Builder. This will allow the 3D model to show the selected color.
Setting Up the Frontend Display
After completing the backend setup, you can configure how the 3D model will appear on the frontend of your Shopify store.
Options for Displaying the 3D Preview:
Inside the Designer: The 3D preview will be shown within the product designer tool as a popup, allowing customers to preview their customizations in real-time.
External Display: Alternatively, you can display the 3D preview as a separate element on the product page. This can be configured through Shopify Theme Customization using the app block for our 3D preview. (See here for more details on how to set up an external module for our app through app blocks)
Note: By default, the 3D model will appear inside the designer as shown in the screenshot at the start of the article. If you prefer to show the preview externally, you can easily add and adjust the app block in your Shopify Theme Customization to display the 3D model as a standalone element. If you need help with this step or any previous ones, feel free to reach out to us via the in-app chat.
Conclusion
The 3D Model Preview enhances the product customization experience in your store, allowing customers to interact with a 3D representation of their designs. By following the steps above, you can easily set up your product, upload the necessary files, and configure everything to ensure a seamless and engaging shopping experience for your customers.
If you have any further questions or encounter issues, don’t hesitate to contact our support team for assistance!