Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Product images

Great product images are an important part of running an online store. You can use images to represent products throughout your site, highlight key features, and provide a closer look at details and textures. This guide covers various ways to use product images.

Tip: To get the most out of this guide, first create a Products Page and add products to your store.

Before you upload images

Review our image formatting guidelines to ensure your images are an appropriate size and quality for online display.

An image’s aspect ratio affects how it appears with your product size and auto cropping options. We recommend editing your images to the desired ratio before uploading. You can also adjust the focus of a cropped image after uploading using its focal point.

Product Page styles can affect how images look

Products Page layouts and style options vary between templates. There are three types of Products Page styles:

  • Classic - The original Products Page
  • Advanced - Includes more features like Image Zoom, Quick View, and advanced hover options
  • Unique - Supports template-specific commerce features

Landing page vs. product item pages

Before discussing product images, it helps to understand how Squarespace structures products on all sites. Products are organized in a two-part hierarchy: Products Pages and product item pages.

Products Pages are landing pages for multiple products, while item pages show details for one product.

For example, on this Products Page, visitors can browse multiple products.

Galapagos__.jpg

Clicking any product will bring them to its product item page, where they can view more images and information about the individual product.

Teresa_Jacket___Galapagos.jpg

Types of Product images 

When adding or editing a product, you can add three types of images:

Tip: Before uploading all product images, upload a few test images to determine the product size and auto cropping options for your product images' aspect ratio.

Primary image

The primary image displays on Products Pages in Classic or Unique templates and as the first image on the product item page.

In the Item tab of the product editor, click the Upload images arrow in the image field, or drag and drop images from a folder on your computer to add images for the product.

The first image in the top-left corner is the primary image. Click and drag images to change their order.

Healthy_Living.jpg

In the Products Page panel or Inventory Panel, the primary image appears above the product title, price, and stock.

New_Products.jpg

On Classic or Unique templates, the primary image displays on Products Pages. It is also the first image on the product item page.

New_Products.jpg

Additional images

Additional images display on the product item page. The second image can display on hover in the Advanced Products Page.

In the Item tab of the product editor, you can add multiple images to the Upload images arrow. All images after the first image are additional images.

Additional images display on the individual product item page. The layout and design for additional images varies between templates.

Envelope_Clutch___Healthy_Living.jpg 

Thumbnail image

Thumbnail images display in Product Blocks, Summary Blocks, and on Advanced Products Pages.

By default, the first image added in the Item tab of the product editor becomes the thumbnail image. However, you can set a different thumbnail image with these steps:

  1. In the product editor, click the Options tab.
  2. In the Thumbnail Image box, click Remove.
  3. Drag and drop the new image into the image uploader.
  4. Click Save.

If you remove the product thumbnail image without setting a replacement, the primary image displays instead.

Envelope_Clutch___Healthy_Living.jpg

Thumbnail banners on Adirondack

On the Adirondack template, product thumbnail images display as a banner on individual product item pages. If you remove thumbnail image without setting a replacement, no banner will display.

Styling product images

Use the Style Editor to customize how product images appear. Depending on whether you're on a Products Page or a product item page, the Style Editor will display different tweaks. These style options vary between template families.

Product size tweaks affect the product image aspect ratio.

Classic templates

These are the image specific tweaks for Classic templates. For help styling product layout, text alignment, and other style options, visit Styling the Classic Products Page.

Products Pages

Use the following tweaks to style how product images display on the landing page.

  • Product Item Size - Set the shape of the image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9
  • Product Image Auto Crop - Choose whether the image crops to fill the image container.
  • Product Background Color - This color displays behind images that aren't cropped to the container size.

Individual product item pages

Classic Products Pages include some tweaks for the item page view:

  • Product Gallery Size - Set the size of the product image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9.
  • Product Gallery Auto Crop - Choose whether the product image crops to fill the image container. If not, the Product Background Color will display behind the image.

Advanced templates

These are the image specific tweaks for Advanced templates. For help with other style options, visit Styling the Advanced Products Page.

Products Pages

Use the following tweaks to style how product images display on the landing page.

  • Product Item Size - Set the shape of the image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9
  • Product Image Auto Crop - Choose whether the image crops to fill the image container.
  • Product Background Color - This color displays behind images that aren't cropped to the container size.

Individual product item pages

Classic Products Pages include some tweaks for the item page view:

  • Product Gallery Size - Set the size of the product image container. Choose from the following height:width ratios: 1:1, 3:2, 2:3, 4:3, 16:9.
  • Product Gallery Auto Crop - Choose whether the product image crops to fill the image container. If not, the Product Background Color will display behind the image.

Unique templates

The Galapagos and Supply templates provide all the same options as Classic, plus some unique, template-specific features. For help styling product images in these templates, visit:

Special image options

Advanced and Unique templates offer special features that let you display images in dynamic ways.

Note: Special features like alternative images and Product Image Zoom layer images over each other. If your images use a transparent background, parts of both images may be visible simultaneously.

Product Quick View

With Product Quick View, customers can click a button to view item details in a lightbox without navigating away from the current page. Product images display as a cropped square. Visitors can click the tiles below to view additional images.

New_Products.jpg

Product Image Zoom

With Product Image Zoom, customers can enlarge product images for a closer look at material, texture, and finer details. Product Image Zoom is available on individual product item pages and Product Quick View lightboxes.

tote.gif

Alternative image on hover

Advanced templates and Galapagos support displaying an alternative image on hover. This is a great way to show off a special feature, another angle, or a key detail for each product.

The second image in the top-right corner of the product editor is the alternative image. Drag and drop the images in the product editor to determine the image order.

marta-products4.gif

Adding alt text

Adding alt text to product images identifies the content of your images for browsers and search engines. This helps your images appear in image search results, and makes your site more accessible to visitors using assistive screen readers.

When adding alt text, use short terms that describe the specific image as well as the product. For example, “Brass clasp close up” and “Floral sundress back.”

Was this article helpful?
0 out of 0 found this helpful
Product images