Create 3D product images for your eCommerce store

This is a guide on how to add 3D product images to your online store. If you require any assistance or clarification with these instructions contact our team. Our tech platform only works with 3D models, so we’re very familiar with the best formats, file types, compression etc. in order to get a hyper-realistic, fast-loading 3D model working on your eCommerce website.

If you’re already using Spiff3D, it’s even easier. You can message us inside our app and/or request a 3D model to be created.

Step 1: Install our app (optional)

Step 2: Search for Existing 3D Files

Step 3: Request for a Bespoke 3D model to be made

Step 4: Check the quality of the model

Step 5: Attach the model to the product

Step 1 (optional): 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.
  • Review the details, then click Install app.
  • Access the Spiff app on the Apps page of your Shopify admin.
  • Go to the ‘Assets’ page to view a range of popular 3D model which you can use – otherwise, request a bespoke model to be made for you via the ‘asset request’ function.

Step 2: Search for existing 3D design files

If you are close to the manufacturing or design side of the business, someone might have access to a CAD file (or other 3D design files). Often these design files can be modified into another file type that is compatible with use within a web-browser. This will save a lot of time because a 3D model won’t need to be created from scratch. This is the fastest way to get a 3D product model created for your product.

Some further technical reading can be found here but in short, you need to export a small file that we can import into Blender and modify. CAD and other industrial design programs do not support ‘UV Mapping’. We need to add UV mapping to the model before it’s ready for digital visualization purposes.

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.

Step 3: Request a bespoke 3D model

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:

  1. Hire a 3D design agency familiar with web-friendly file formats
  2. Hire a freelance 3D Model designer
  3. 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+)
  4. Get us to create one for you (~USD$80+)
  5. 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 so you need to know a reasonable amount of technical knowledge to purchase wisely here).

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 before they start.

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 modeling team a better idea of what they need to recreate, digitally. We can replicate any texture – for example – leather patterns, cotton candy, velvet, metallic 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 labeled folder.

Supply Product Dimensions

The 3D modeler 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 the base of the bottle to the start of the cap.
  • Provide the measurements in millimeters (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 that 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 subpar user experience while on your store.

A skilled 3D modeler will be able to compress parts of the 3D file without sacrificing quality.

Check the model from all angles. While reviewing your model, consider:

  • Check the general shape of the model to see if it’s 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 its 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 file 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 3D product models cost

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.

The quickest 3D model we’ve done – Client X – Product = a name plaque – 1hr total
The 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 as you would in real life, by assembling a product from a sum of its parts. If it’s just a simple 1 piece product (aluminum can) then modeling 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 to 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 customer’s website’s who we created hyper-realistic 3D product models. 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

This is a picture which Simon sent us with the real product in front of the screen which is displaying the 3D model. You can see how realistic is it. Click on the link above to his site where you can see how it works in real life.

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

Get your own 3D Model – for free

Inside the Spiff3D app, there’s a library of popular 3D models for many different products.

Alternatively, you can submit a bespoke model to be made for you by creating an ‘Asset Request’ inside the app.

Posted in

Josh Shampo

Josh Shampo is a developer on this site and should assign all posts to a new user.