Tips for adding stand-out product photography to your store.
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.
Watch a video
Before you add images
You can add images to a product by uploading them directly or by reusing images you've already uploaded in other areas of your site.
Before you upload an image, review our image formatting guidelines to ensure your images are of 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 them. You can also change the focus of a cropped image after adding it using its focal point.
A product can have up to 100 images. However, overloading the product with images can cause the page to load slowly. We recommend keeping pages under 5MB.
Tip: Start by adding a few test images to see how they look and experiment with style options.
Store page vs. product details pages
Before discussing product images, it helps to understand how Squarespace structures products on all sites. Products are organized in two parts:
- Store pages are landing pages for multiple products.
- Details pages show details for one product
For example, on this store page, visitors can browse multiple products.
Clicking any product brings them to its product details page, where they can view more images and information about the individual product.
Types of product images
When adding or editing a product, you can add these images:
- Featured image
- Primary image
- Additional images
- Variant images
- Alternate Social Sharing Images
How they display depends on your site's version.
Featured images
Featured images represent the product in most areas of your site, so it's best to use the image you want customers to see first. The image appears in these areas:
- Store pages. Shoppers click a product's featured image to get to the product details page
- Product blocks
- Summary blocks
- The store page and Inventory panels
By default, your product's primary image becomes the featured image. To set a different featured image:
- In the product editor, click the thumbnail of the current featured image.
- Upload an image.
- Hover over Save and click Save.
Primary images
The primary image appears as the first image on product details pages. The primary image is the first image that displays in the product editor. Click and drag images to change their order.
Additional images
Additional images give shoppers a well-rounded view of your products. Use additional images to show detail shots, your product at different angles, or staged photos. Additional images appear on product details pages. In the product editor, all images after the first image are additional images. Click and drag images to change their order.
Variant images
On product details pages, variant images show shoppers what each product variant looks like. For example, you can use variant images to show products in different sizes and colors. By default, the product featured image displays until shoppers select a variant from the drop-down menu.
To customize a variant image:
- In the Product editor, scroll to the variant section and click Edit all.
- Click the image upload icon beside a variant.
- Click the + icon to to upload an image, or select an image you've already uploaded.
- Click Apply.
You can also click a variant in the main product editor, then click Add images to add a variant image.
On version 7.0, image display depends on your template's store page type.
Primary images
The primary image represents the product in most areas of your site, so it's best to use an image you want most customers to see first. The image appears in these areas:
- On Classic or Unique store pages.
- As the first image on product details pages.
- In the store page panel or Inventory Panel.
The primary image is the first image that displays in the product editor. Click and drag images to change their order.
Additional images
Additional images give shoppers a well-rounded view of your products. Use additional images to show detail shots, your product at different angles, or staged photos. Additional images appear in these places:
- Product details pages.
- The second image can display on hover in Advanced store pages.
In the product editor's Item tab, all images after the first image are additional images. Click and drag images to change their order.
Featured images
Featured images show a preview of your products in different areas on your site. In templates that support the Advanced store page, shoppers click a product's featured image to get to the Product Details page. Featured images also display in these areas:
- Advanced store pages
- Product blocks
- Summary blocks
- In the Adirondack template, they display as a banner on individual Product Details pages.
By default, the first image added in the Item tab of the product editor becomes the featured image. To set a different featured image:
- In the product editor, click the Options tab.
- In the Featured Image box, click the Trash Can icon.
- Add a featured image.
- Click Save.
If you remove the featured image without setting a replacement, the primary image displays instead.
Variant images
On product details pages, variant images show shoppers what each product variant looks like. For example, you can use variant images to show products in different sizes and colors. By default, the product featured image displays until shoppers select a variant from the drop-down menu.
To customize a variant image:
- In the Product editor, click Pricing & Variants.
- In the far-left column, click the image field to edit it.
Alternate Social Sharing Images
A product's Alternate Social Sharing Image displays on social sharing platforms or in text messaging applications when you share the URL of the product details page. If you don't add an Alternate Social Sharing Image for a product, we’ll use the item's featured image instead.
Style product images
How you style product images depends on which version of Squarespace your site is on.
Customize how product images appear using section styles and the Product Item tweaks in the Site styles panel.
Product sections
To change how product featured images display in store sections, hover over the section and click the pencil icon.
You can change the spacing, columns, aspect ratio, and text alignment. You can also show or hide product prices. To change the colors, click Colors.
If your product images appear cropped, visit Troubleshooting cropping issues.
Product details pages
To change the way products appear on the product details page:
- Edit the page and click Edit design.
- Open section styles, then click the layout drop-down menu.
- Select a layout.
- Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
You can style elements like image aspect ratio, text alignment, and product gallery design. To achieve a cohesive design, these style changes apply to all products in your store. It's not possible to edit these settings for specific products.
Use the Site styles panel to customize how product images appear. The available layouts and style options depend on your template family's store page type. To learn more, visit Store page styling.
- Classic
- Advanced
- Unique
Classic tweaks
These are the image-specific tweaks for Classic store pages:
- Store pages - Use the Product Item Size, Product Image Auto Crop, and Product Background Color tweaks to style how product images display on the store page.
- Item pages - Use the Product Gallery Size and Product Gallery Auto Crop tweaks to set the image size and cropping for details pages.
Advanced tweaks
These are the image-specific tweaks for Advanced store pages:
- Store pages - Use the Image Aspect Ratio tweak in the Products: Layout section to set the shape of the images on the store page. The images automatically crop to fit the shape.
- Item pages - Use the tweaks in the Products: Gallery section, such as Design, Aspect Ratio, Thumbnail Ailgnment, and Thumbnail Width, to style images on details pages.
Unique tweaks
For help styling product images in these templates, visit their template guides:
Special image options
Some store pages offer special features that let you display images in dynamic ways. How these images display depends on your site's version.
- Product Quick View - Customers can click a button to view item details in a lightbox without navigating away from the current page. In version 7.1, this is available on the Product Details page only.
- Product Image Zoom - Customers can enlarge product images for a closer look at material, texture, and finer details. In version 7.1, this is available on the Product Details page only.
- Alternative image on hover - This is a great way to show off a special feature, another angle, or a key detail for each product.
For help with any of these, visit Store page special features.
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.” You can add alt text of up to 200 characters to each product image.