Product media types
Customers browsing in your online store view media like images on product pages. Using media like video, 3D models, and augmented reality on your product page can increase a customer's confidence in your products, leading to a better customer experience and more sales. It's important that the media that you add for your products are high quality and meet the required specifications so that they are displayed properly.
To display videos or 3D models on product pages, your online store needs to use a theme that supports the media that you want to add. All themes support adding images to your products.
Product images are used to display products across Shopify's sales channels, including on your online store and in Shopify POS. The best file type for most product images is
PNG, followed by
GIF. Other accepted file types are
WebP. Shopify's Imagery service determines which image formats are supported by your customer's web client, and then automatically displays the image in the best format available. The exact way that images appear on your store depends on your online store theme, but all themes support adding images.
Your product and collection images can be any size up to 4472 x 4472 px, or 20 megapixels. Product and collection images need to have a file size smaller than 20 MB to be added to Shopify.
High resolution photos look more polished and professional to your customers. For square product images, a size of 2048 x 2048 px usually looks best. For more advice about photographing your products, read The definitive DIY guide to beautiful product photography in the Shopify Blog.
When you add an image, different sizes are automatically created for use in different areas of your online store theme. For example, a product image's large version might be used on the product detail page, where the customer wants to see the product in detail. The compact version of the same image might be used on the collection templates, where a larger image isn't necessary.
3D models are virtual representations of an object in three dimensions. 3D models can provide your customers with a better sense of the size, scale, and the details of your products.
A customer who is browsing your store can view 3D product models from the product page. The models use the device's camera and screen to show the product in the customer's environment. Using the 3D model, the customer can view the object from any angle.
You need to make sure that your 3D model files meet the following requirements before you add them to your online store:
- File size: Up to 500 MB
- File type:
If you upload a 3D model file that exceeds 15 MB, then Shopify will optimize the file. Optimization reduces file sizes and increases loading speeds.
|Smaller than 15 MB||3D model isn't optimized. Model geometry and materials aren't changed.||Files are converted to ensure both a .USDZ and .GLB version of the model is available. Conversion ensures compatibility with both Android and iOS based devices.|
|Larger than 15 MB||3D model is optimized. Model geometry and textures are optimized, while preserving the visual output of the original file.||Files are converted to ensure both a .USDZ and .GLB version of the model is available. Conversion ensures compatibility with both Android and iOS based devices.|
You can add videos for your product in two ways: uploading a video file, or embedding a YouTube or Vimeo video link. If you're uploading video files, then make sure that they meet the following requirements:
- Video length: Up to 10 minutes
- Video size: Up to 1 GB
- Video resolution: Up to 4K (4096 x 2160 px)
- Video file type:
You don't need to meet these requirements for embedding YouTube or Vimeo videos.
In browsers that support streaming, videos display in either 480p, 720p, or 1080p, depending on the viewer's connection speed and the resolution of the uploaded video. In browsers that do not support streaming, videos display in the highest resolution available.
You can add images, 3D models, or videos for your products from your Shopify admin or the Shopify mobile app.
Supported themes for 3D models or videos
Your theme might already support 3D models or videos. You need to ensure that your theme is updated with the right version.
The following themes by Shopify support the display of 3D models or videos on your online store.
Online Store 2.0 Themes:
Certain themes have also been updated to provide an enhanced experience for Vimeo video playback. If you want to feature Vimeo videos in your theme, then consider updating your theme to one of the following versions:
- Brooklyn version 17.3.0 or higher
- Debut version 17.10.0 or higher
- Narrative version 10.3.0 or higher
Most third party themes have recent versions that include 3D models or videos. If you use a theme developed by a third party, then you can contact the theme developer for support, or refer to your theme's help documentation.
Adding product media by using Metafields
If you want to customize the way that product media are displayed in your online store, then you can use Metafields to create a file reference Metafield for your products. File reference Metafields support uploading images to display your products, or all other file types for your customers to download. You can display JPEG, PNG, or GIF images in Metafields on your online store. A Metafield can contain only one file at a time.
If you have an Online Store 2.0 theme, then you can connect file reference Metafields to your theme by using the theme editor. If you're using vintage themes, then you can edit your theme code or hire a Shopify Expert to help you.