This is how you can add 3D product images to your online store. If you require any assistance or clarification with these instructions please contact James or send us a message using the form at the bottom of this page. Or, just message us inside our app, if you’re already using our technology.
Step 1: Install the Spiff 3D Product Customiser app
- Search for our app in the Shopify App Store or click here for the link which will take you to our listing inside the store.
- Open the sign-up page
- Enter your myshopify.com store domain
- Click Install.
- Review the details, then click Install app.
- You can access the Spiff app on the Apps page of your Shopify admin.
- Follow the installation steps to fully install the app. You can find them here [link]
To use the 3D product visualisation benefits of the Spiff app, you’ll need to first obtain a 3D model file of your product/s.
Step 2: You might already have a 3D design file
Iif you are close to the manufacturing side of the business, someone might have access to a CAD file (or other 3D design file). Often these design files can be modified into another file type that is compatible for use within a web-browser. If this is the case, it will save a lot of time and is the fastest way to get a 3D product model created for your product.
Alternatively, if you are already using a 3D software program like Blender, follow these 3D file export instructions so you can export a glb file in the correct format. Some further technical reading can be found here but in summary you need to export a stl file that we can import that into Blender and modify. CAD and other industrial design programs do not support ‘UV Mapping’. We need to UV mapping to the model before it’s ready for digital visualization purposes.
Step 3: Request a 3D model to be made
Assuming you don’t have a 3D design file already, you’ll need to create one.
There’s four main ways you can do this:
- Hire a design agency who can do 3D design
- Hire a freelance 3D designer
- Use the Shopify Partner Program to source a registered Shopify 3D designer expert who can create a model and load it into Shopify’s default 3D warehouse product (~USD$200+)
- Get us to create one for you (~USD$80+)
- If your product is quite generic you might be able to find a suitable model on 3D asset marketplaces like Sketchfab, CG Trader, Turbosquid etc (note the quality and suitability of these models vary greatly)
If you install our 3D Customization app, you instantly get access our global support team. No matter what country you are in, you can connect via live chat, email, WhatsApp, Zoom, Skype etc. All communication via these methods is logged and recorded in our system, so we can’t miss it. Once you are logged in, it should be pretty easy to request a 3D asset, but here’s some instructions if you get stuck.
Regardless of who creates the model for you, this is what you need to supply them.
Supply Product Photos
3D modelers use powerful software programs to create 3D models from real product photos. This is the most popular method for creating 3D models. When taking photos of your product, please follow these guidelines:
- Make sure that your product is well lit with light and not sitting in shadows.
- Make sure that your whole product is in focus – not the background.
- Some of the newer cameras on phone are good, but if possible, don’t use a cellphone camera. For large products like furniture, use a camera with a 50 mm lens because we need to see the detail. For small to medium size products, use a 70 mm or 100 mm lens.
- Take extra close-up photos of any unique details or textures. This will give our 3D modelling team a better idea of what they need to recreate, digitally. We can replicate any texture – example – leather patterns, cotton candy, velvet, metalic surfaces etc.
- Name the photo files clearly so we know what they are. For example “blue vase – top”, or “blue vase – left” and store them in a clearly labelled folder.
Supply Product Dimensions
The 3D modeler also needs to know rough product dimensions (or exact dimensions if you have them). This is especially important if you want to use our customization features (labels that get applied to the product or extra elements that modify the base product)
To provide accurate measurements, please follow these guidelines.
- Describe each dimension of your product in clear, simple terms e.g. 15mm – height from base of the bottle to the start of the cap.
- Provide the measurements in millimetres (mm) – if you are in the US, use Google to convert from inches.
- If the product is complex, it’s helpful to sketch a diagram to show which dimensions the measurements correspond to.
- If you have technical drawings or CAD files associated with your product, include those as well
Step 4: Check the quality of the model
When you receive your 3D model, you should check that you’re happy with its quality. You can view the model via the Spiff app once, you’ve attached the file to the product that it relates to within your Shopify store.
Note: the more detailed and complex your model is, the higher the bandwidth which is needed to render the product via a desktop or mobile browser. If the detail is too high, or complex for the users’ browser or device to handle, they may experience latency issues or a sub par user experience while on your store.
Check the model from all angles. While reviewing your model, consider:
- Check the general shape of the model to see if its like the real product. Proportions are important here.
- If you’re previewing the model in augmented reality (AR), check the scale of the product relative to the surrounding area. It may need to be scaled back or up from it’s default size.
- Check to see if the surface textures reflect what it looks like in real life. Reflections and lighting effects can be modified reasonably easily and when done right, this really adds that realistic touch. So double check any transparent and reflective areas so they look right.
- Check the model for any stretched, blurry or distorted areas.
- Sometimes, when the model is too smooth and perfect, it will look unrealistic. So great 3D artists will add little imperfections that give it a lifelike feel. Maybe the model needs some imperfections to be added.
- Check the edges of the product, especially if they are too sharp or too soft.
- If there are any decorative details, such as a logo or some text, are they easy to see?
- Are there any gaps or holes where there shouldn’t be any?
If you think that the quality of the model isn’t good enough, then contact the relevant person and explain what is wrong with it. Sometimes, it will take a bit of back and forth before the model looks perfect.
Step 5: Attach the 3D model asset to your product
When you have the Spiff app installed and have sourced a 3D model, you need to add the model to the Spiff App
- From your Shopify admin, click Apps.
- Click Spiff
- Click Add 3D Model.
- In the Title field, enter a title for the 3D model.
- In the Linked Product field, select the product and variant that this 3D model is associated with, then click Select product.
- Click Upload File and select the .usdz file provided by the Shopify Expert.
- Click Save.
Repeat the upload process for the .gltf or .glb file that your Shopify Expert provided. Make sure you link it to the same product so that you have both 3D model file types associated with the product.
If you upload a .gltf file, you’re prompted to add additional files in the Linked Files section. Click Upload File to upload the linked texture resources provided by your expert.
Time-lapse of a 3D model being created
Watch how a professional 3D designer created a 3D model of this ammo bag in 2.5hrs using the program called Blender. You’ll see the amount of work that needs to be done and how the program works
How much it costs to create 3D models
Much like with a website or anything creative, how long is a piece of string? With that said, expect to pay between $80 and $500 USD per 3D product model.
Quickest 3D model we’ve done – Client X – Product = a name plaque – 1hr total
Longest 3D model we’ve done – Client Y – Product = a shoe – 15-24hrs total
The factors that determine the cost, reflect the amount of time it takes the 3D artist to create the model. This time varies significantly from product to product, but the main determinants are:
- Creating realistic textures which are meshed into the model vs just layering a 2D image on top of a base product
- Recreating a real-life color depends on how you texture the surface and how reflectivity (roughness) is set
- If the product consists of many individual parts which need to be individually modeled and then put back together like you would in real life, by assembling a product from a sum of its parts. If it’s just a simple 1 piece product (aluminium can) then modelling doesn’t take as much time as a shoe does which consists of many different layers which all need to be joined together. Stitch lines, shadowing between the layers, different textures and reflectivity for the different materials etc – all of this adds to the time.
- Imperfections need to be added so it looks real. If every surface was computer perfect, the human eye spots it as a fake. So good 3D artists add minute imperfections and play with textures or lighting to give it a realistic feel.
- Materials take the longest. This involves adding texture and complementary shadows so make the product look real. For example, creases in a t-shirt. This can be done with things like ambient occlusion, good quality, optimized 3D models can have this ‘baked’ in, so that performance on a mobile isn’t adversely affected.
An example of a hyper-realistic 3D product model
Go and visit one of our customers website’s who we created hyper-realistic 3D product models for. Click on any of these shoe models and zoom in on the product so you can see the quality of the model’s detail. Customize your shoe now
See more examples of 3D models of shoes and footwear
See more examples of 3D models of t-shirts and clothing apparel
See more examples of 3D models of food and beverages for CPG/FMCG
See more examples of 3D models of popular gifts and gift cards
See more examples of 3D models of furniture and homeware
See more examples of 3D models of printed material
See more examples of 3D models of sporting products
Apply for your own 3D Model – for free
Each month we take some time out from our busy schedule to create a 3D model for one lucky person
Fill out the form below to enter. Who knows how lucky you’ll be!