When’s an image not an image? When it turns into “media.”
It’s no joke — Shopify is making some exciting changes to how themes handle the now broader category of “media.”
“Media” is essentially replacing much of the “image” functionality within Shopify and themes.
This means, among other things:
- Shopify will continue to support a wide range of image files and handle the associated conversions as well as WebP, where available.
- There will now be native support for video, including YouTube and HTML5 formats in product galleries.
- Added support for interactive 3D models on product pages.
- New support for augmented reality “see it in your space” features on compatible devices.
Let’s take a look at each of these features.
Video
Including video in product galleries is a great way to add additional dimensions for showing off your products or services to customers.
In the past, Shopify themes have used a variety of techniques to include video in product galleries.
Out of the Sandbox, for example, used the image “alt” tag feature to trigger an embed from YouTube on product pages.
Going forward, however, these workarounds won’t be necessary as Shopify will support adding YouTube video embeds directly from within the product media gallery.
In addition, merchants will also be able to upload compatible HTML5 video files directly to Shopify’s servers and use it in galleries.
The advantage to the latter approach is that your videos won’t have any YouTube branding on the player.
That said, hosting your video on YouTube can be a great way to draw traffic from another source — since YouTube is often referred to as the “second Google” search engine given the amount of traffic, searches and discovery that takes place on it.
Videos are also still subject to some limitations about how they play and whether autoplay will work or not depending largely on the user’s device and browser.
3D models
Support for 3D models actually enables two distinct features: The ability for users to interact with a 3D media file of your product and augmented reality.
3D model viewer support gives your customers the ability to rotate around your product on their screen or device. This is the virtual equivalent of being able to pick up a product in real life and examine it from any angle you’d want.
Meanwhile, Shopify is also adding “Shopify XR” support that also relies on a 3D model of your product.
However, this feature adds an augmented reality layer — sometimes referred to as “view in your space.”
With this feature enabled, users on compatible devices with cameras can “place” the 3D model of your product on a real-life surface in their home, workplace or other location.
The user can then move around the space with the device and see the product from multiple angles as if it was virtually “transported” there.
Of course, since the item can’t really be placed there, shoppers use their device as a “viewer” in much the way they might use binoculars or a virtual reality headset.
Getting 3D models made
Both the model viewer and augmented reality feature require you to have a compatible 3D model file in the GLB format.
While some applications of GLB, such as those on Facebook 3D photos, can mimic a full 3D model in photos taken with depth of field data (such as images taken using the iPhone “portrait” mode), they won’t work in this case.
Creating 3D models can be done with a variety of software programs, including Maya, Blender, 3ds Max, and Photoshop, but there’s generally a bit of a learning curve to get started.
You’ll also want to ensure that you’re using photorealistic rendering with high-quality textures to prevent the 3D models from looking too much like a low quality video game element. Wherever possible, imagery of your actual materials should be used.
Unless you have experience with building 3D models, you’ll most likely want to explore hiring a freelancer or agency to recreate your product in GLB.
That said, you may already have access to a 3D model — or at least the start of one — if you manufacture your own product.
In manufacturing that involves molding, stamping, computerized cutting, 3D printing, or other automated processes, 3D models are often made to guide the creation of the product.
It’s worth checking with your manufacturing partner or product designer to see if they have 3D models available.
In most cases, 3D models used directly for manufacturing won’t come with textures or lighting effects applied, but you may be able to save some time and resources by handing over the “skeleton” of the product they are creating a model for.
However, if, during the product development project, you were shown photorealistic 3D renderings of your product, it’s likely that more detailed 3D model files already exist.
When to use 3D
3D model viewers can be particularly effective for products that have at least some dimension to them.
In general, if you’re selling, for example, framed prints, T-shirts or other apparel or books, having a 3D model may not be all that beneficial since these products tend to be rather flat to begin with. Instead, having a “front” and “back” (and sometimes sides) photo can often create the same effect.
There are, of course, always exceptions. Continuing with our examples, if your print comes in frames with detailed ornamentation or shoppers could benefit from seeing all of the sides of a piece of clothing, a 3D model may be appropriate.
Meanwhile, augmented reality applications are typically best used in even more limited cases.
The most obvious use for them are home decor items such as furniture or accessories that allow users to “place” the product in the room in question to see how it looks and fits.
Limitations
As with any image, video or other media format, media can only be as good as the original source file Shopify is provided with.
With solely photo based galleries, it’s still important to use high-quality, well lit product photography.
Likewise, video and 3D models also need to be high-quality — or the end result will be less than ideal.
All media formats also have the issue that colors shown can vary greatly depending on the users’ screen settings, ambient light and other factors, so exact “color matching” can’t be guaranteed.
It’s also worth noting you may notice color differences between your product image, video clips and 3D model due to these same issues — as well as technical issues of how each format is processed and stored.
It’s also important to keep in mind (and remind your shoppers) that augmented reality has limits on how accurately it can display exact scale.
Shoppers should be reminded that while augmented reality is a great way to get a general sense of how the item will look in their space, everything from lighting conditions to wall colors can affect how the actual product will look in the room.
It’s also vital to note that augmented reality models can (sometimes comically) show items at an inaccurate scale in a room.
Even under ideal conditions, if a highly specific measurement, such as down to inches or centimeters, is needed, augmented reality can’t be guaranteed to represent how an item will fit.
Finally, while support for photos and video is fairly wide, 3D models and augmented reality have more specific requirements.
In general, a modern, up to date web browser is required for 3D model views. Various devices may also have different ways of how the shopper interacts with the model.
For example, if no mouse is available, then manipulating the view of the model will rely on the touchscreen.
Augmented reality views, by definition, essentially require the user’s device to have a camera — so any device without that feature likely won’t support augmented reality.
Fallbacks
Shopify has taken certain steps to make sure that when a device can’t support a certain media format, it won’t be displayed.
Again, most photos and videos will be well supported and display fairly consistently across devices.
However, since support for 3D models and augmented reality is still emerging, Shopify has built-in features that will attempt to hide media that isn’t compatible with the user’s device.
In most cases, Shopify will hide the media and the space it occupies if it’s not supported. Although, in some rare cases, limitations in technology may result in a blank “white space” being shown instead.
