Product Images

On desktop devices, our themes display product images in a slider with thumbnails. On mobile devices, thumbnails are hidden; users can view images by swiping left or right. 

Image ratio

To adjust the image ratio of your product images, navigate to Theme settings > Layout. Scroll down and select the dropdown Image ratio to change the setting. 

If Adapt to Image is enabled, it will adapt all images to the ratio of the featured (first) image of each product. If the ratio of your featured image is different than the ratio of any subsequent images, those subsequent images will be cropped to the same dimensions of the featured image. To avoid this, please use the same dimensions for all product images.

If Square or Portrait is enabled, then all product images will be cropped to the same square or portrait orientation.

We recommend creating all your product images with the same shape and orientation to keep a uniform appearance. The optimal product image size we recommend is 2000px width to keep a good quality with zoom.

Thumbnail images

On desktop devices, thumbnails appear next to the hero image. We recommend a maximum of eight thumbnail images per variant. If you have more than eight thumbnail images per variant, the thumbnails will overflow into additional columns on the product page and the main (hero) image will be downsized to fit on the page. For example, if you have 12 thumbnail images for one product variant, the thumbnails will overflow into two columns and your large hero image will be downsized. Please see below two versions of the same product, one with eight thumbnails and one with 22 thumbnails.

Filter gallery by color

For variant options such as color, our themes provide the option to filter images displayed on the gallery depending on the selected color variant, this feature is ideal for merchants with many images per color. To filter the gallery by color, please follow the steps below:

1. Go to Products > Default product and select the Default product template.
2. Click the Product page section to open its settings.
3. If enabled, uncheck the Show images of all colors regardless of variant selected option.
4. On the Shopify admin, go to the product you want to filter images by color.
5. Find the Media block and click on one of the product images to open the image's settings.
6. Click Add alt text and type the color name exactly as it appears on your variant in parentheses. For example, if your color variant is Heather Gray, type the alt text as (Heather Gray) .
   • If you don’t add any alt text, the image will be displayed for all color variants.
   • You may add additional alternative text outside of the parentheses. You may want to describe the image for accessibility purposes. For example, Long Dress with Short Sleeves (Black). 
7. Click Save alt text.

Our themes offer the option to filter thumbnails by any custom option such as Fit, Material, or Style. For instructions on setting up custom options please visit Products.

To find more information about variant picker and color swatches please visit the articles Variant picker and Color swatches.