Supported Versions
The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.
Product media can include images, 3D models, and videos. Using product media lets your customers see what your products look like and can give them a better idea of how the appear in real life.
You can add up to 250 images, 3D models, or videos to a product.
Support for product media has been added in the following theme versions: Turbo 6.0, Flex 2.0, Parallax 3.7.0, Retina 4.7.0, Responsive 7.2.0, Mobilia 6.2.0, and Artisan 1.3.0. (What theme version am I using?).
In This Article
- Product media types
- Adding product media
- Product media theme settings
- Mobile layout and functionality
- FAQs
Product media types
There are three different product media types: images, 3D models and videos.
Images
Images are probably the product media that you'll be most familiar with. These are the images that are used to display your products.
- File size: we recommend images that are 1024 x 1025px with a file size smaller than 20 MB; maximum size of 4472 x 4472 px, or 20 megapixels.
- File type: the best file type for most product images is JPEG, but PNGs can also be used (please be advised that PNGS will be a larger file size which is important to consider).
While all of our themes will have an 'align height of product images' setting for product images on Collection pages, we recommend uploading product images that are the same size and to use a consistent aspect ratio, or height-to-width ratio for best results.
3D models
3D models are virtual representations of an object in three dimensions. They let you view the object from any angle. With 3D models, you can provide your customers with a better sense of the size, scale, and detail of your products. You need to make sure that your 3D model files meet the following requirements before you add them to your online store:
- File size: Recommended size is 6MB or under; maximum size of 15MB accepted.
- File type: GLB
You can hire a Shopify Expert to help you create quality 3D models of your products.
Please note: IE 11 does not currently support 3D models at this time.
Videos
You can add videos for your product in two ways: uploading a video file, or embedding a YouTube video link. If you're uploading video files, then make sure that they meet the following requirements:
- Video length: Up to 60 seconds
- Video size: Up to 1 GB
- Video resolution: Up to 4K (4096 x 2160 px)
- Video file type:
.mp4or.mov
If you're embedding YouTube videos, you do not need to meet those requirements.
Adding product media
The first media item for each product is known as the featured, or main, media item. The main media item is shown on collection pages, the cart page, the checkout page, and your home page.
Step 1: From your Shopify admin, head into Products.
Step 2: Select a product or add a new product.
Step 3: Add an image, 3D model, or video in one of the following ways:
- Click Add media and then select the file that you want to upload.
- Drag and drop the file that you want to upload onto the Media section.
- Click Add media from URL to add an image or video from a URL.
If you add more than one media item for a product, then the largest one shown on your product's details page is the product's main media item. You can set a new main media item by dragging a different media item to its place. You can also sort the other media items by dragging them.
When you add 3D models and videos to your products, thumbnails are created for them automatically. However, you can replace the default thumbnails with images of your choice:
Step 1: From your Shopify admin, go to Products > All products.
Step 2: Click the name of the product that you want to edit.
Step 3: Under Media, click the ⋮⋮ icon that appears on the 3D model or video you want to change the thumbnail for.
Step 4: In the top-right corner, click ⋮ and then click Replace thumbnail.
Step 5: Choose the source of your image, and then select the image that you want to use.
Step 6: When you've added your image, click X to exit the media preview.
If 3D models and videos are added as product media, once uploaded, you'll notice icons display on top of the thumbnail images. These are standardized icons across Shopify that indicates what type of media it is, so customers know they can interact with it. The icons will appear within product galleries on your storefront.
It's also important to add alt-text (alternative text) to your product media as well. If a media item can't load for any reason, then alt text is shown instead. It's also used by assistive technology to describe an image to a customer who's visually impaired. Including alt text can boost your website's SEO.
Learn more about adding alt-text to your product media here
Product media theme settings
In order to interact with 3D models, you can click the icon. Once you've clicked the icon, you can zoom in/out, view the model in more detail, and enter fullscreen.
Videos, on desktop, as long as the video is not the main media item (first item) it will autoplay once selected, if you have that setting enabled.
It's also important to note that if you have the 'Show secondary product media' setting enabled (Theme Settings > Product Grid) and you have a video added as your second media type, hovering over the thumbnail will play the video.
The Product settings (Customize > Product Page > Sections > Product) in the Theme Editor now have a new area for 'Media':
- Media position (left/right)
- Set height of product media/Product media height
- Enable video looping
Along with these new 'Media' settings, with the addition of product media, all of our themes now have the ability to enable a thumbnail slider of the product page. Learn more
Mobile layout and functionality
If you have the thumbnail slider enabled, it will remain on mobile. If you don't have it enabled, the thumbnail images will appear in a grid below the main media item.
There are two forms of navigation through the media items on mobile: arrows below the main media type and swiping through the gallery.
3D Models
For 3D models, the icon remains on top of the thumbnail, clicking it will still allow customers to interact with the model to view it's details and pinch in/out to zoom.
If your mobile device supports AR functionality (augmented reality), there will also be a 'View in your space' button below the thumbnail image.
Clicking this button allows customers to actually view the model in their space:
Videos
Videos will not autoplay on mobile. Shopify requires the autoplay to be disabled on mobile. There are restrictions put in place for autoplaying videos on mobile from Browsers. This is because autoplaying videos will affect the amount of data that the user is downloading, and raise some accessibility issues as well.
FAQs
Can I change the 3D model and Video icons to a custom icon or hide them?
No, these icons are a requirement from Shopify and are consistent across the board for all themes so customers become familiar with them and understand that they can interact with the media.
Can I remove the video details from my YouTube video?
No, these details are coming from the YouTube player itself. If you're looking for a "cleaner" look, we suggest uploading a native MP4/MOV video file instead.
How do I create 3D models of my products?
You can hire a Shopify Expert to help you create quality 3D models of your products.
Can I disable the navigation arrows on mobile?
The navigation arrows on mobile were a requirement from Shopify, so there is no setting to disable them. You can only do so by editing the code to remove them.