Add and style product images

false

Add and style product images

Last updated September 30, 2026 20:25

Upload and style images to showcase items in your online store.

Product images are an important part of selling your goods and services in an online store. You can use images to represent products throughout your site, highlight key features, and show how product variants differ. For physical products, images also provide a closer look at details and textures.

Tip: Register for our Design tips to increase your store’s sales webinar to learn how to make your products stand out across your site and drive sales.

Video on creating your own product photography

This three-minute video walks through creating your own product photography using a few everyday items.

What types of product images can I add?

When adding or editing a product, you can add these images:

To add images to a product, you can upload them directly or reuse images you've already uploaded in other areas of your site.

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 5 MB.

Tip:

  • Add a few test images to see how they look and experiment with style options.
  • Review our image formatting guidelines to ensure your images are of an appropriate size and quality for online display.
  • We recommend editing your images to the desired ratio before uploading them.

How product images display depends on your site's version.

Featured images represent the product in most areas of your site, so use the image you want customers to see first. The image appears in:

By default, the first image listed in the product editor becomes its featured image. To set a different featured image, hover over an image, then click Set as thumbnail. Or click ••• to change the featured image.

Additional images

Additional images give customers a well-rounded view of your products. Use additional images to show detailed shots, different angles of your product, 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 display in the gallery of additional images. Variant images show what each product variant looks like. For example, use variant images to show products in different sizes and colors. By default, the featured image displays until customers select a variant from the dropdown menu.

To add or change a variant image:

  1. In the product editor, scroll to the variant section then click Edit all.
  2. Click the image upload icon beside a variant.
  3. Click + to upload an image, or select an image you've already uploaded.
  4. Click Apply.

On version 7.0, image display depends on your template's store page type.

The featured image represents the product in most areas of your site, including as the product thumbnail on the store page, so use an image you want most customers to see first. The image appears:

  • On Classic or Unique store pages.
  • As the first image on product details pages.
  • In the Store page panel or Products panel.
  • On Product blocks and Summary blocks.

To set the featured image, hover over an image in the product editor and click Set as thumbnail.

The first image in the product editor is the first image on the product details page, even if that's different from the featured image.

Additional images

Additional images give customers a well-rounded view of your products. Use additional images to show detailed shots, different angles of your product, or staged photos. Additional images appear :

  • On Product details pages.
  • On hover, the second image displays (Advanced store pages only).

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 display in the gallery of additional images to show what each product variant looks like. For example, use variant images to show products in different sizes and colors. By default, the product featured image displays until customers select a variant from the dropdown menu.

To change a variant image:

  1. In the Product editor, scroll to Inventory.
  2. Under Variants, click Edit All.
  3. Click the upload button next to the variant, select an image or upload an image.
  4. Click Apply.
  5. Click Back, and click Save.

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, the item's featured image is used by default.

To change your product's featured image:

  1. Open the product editor, and scroll to the Images section.
  2. Click + toupload an image or select an existing one from your image library.
  3. If the product already has a featured image, click ••• on the image, then click Delete. Then, upload a new image. Or, click the thumbtack icon on a different product image to set it as the featured image.
  4. Click Save.

Delete product images

To delete product images:

  1. Edit the product.
  2. In the Images section, click ••• on the image you want to delete.
  3. Click Delete, then click Delete to confirm.
  4. Click Save.

Deleting a variant image from the gallery of additional images also removes it from the variant editor.

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.

Style 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.

Tip: If your product images appear cropped, troubleshoot common cropping issues.

Style product details pages

To change the way products appear on the product details page:

  1. Edit the page and click Edit design.
  2. Open section styles, then click the layout dropdown menu.
  3. Select a layout.
  4. 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. You can also change the focus of a cropped image after adding it using its focal point.

To achieve a cohesive design, these style changes apply to all products in your store. You can’t 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.

Product image tweaks for Classic store pages

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.

Product image tweaks for Advanced store pages

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 Alignment, and Thumbnail Width, to style images on details pages.

Product image tweaks for Unique store pages

For help styling product images in these templates, visit their template guides:

Special image options

Some store pages offer special features that display images in dynamic ways. How these images display depends on your site's version.

  • Product Quick View: Customers 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.

Add alt text to your product images

Adding alt text to 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.

To add alt text to a product image:

  1. In the product editor, click Images.
  2. Click ••• on the image, and then click Edit Metadata.
  3. Add your image alt text.
  4. Click Apply, then click Save.

When adding alt text, use short terms that describe the specific image as well as the product. For example, “Brass clasp close up” and “Room with king size bed.” You can add alt text of up to 200 characters to each product image.

Enhance product images using extensions

To create professional-quality visuals that enhance your online store, connect soona, a virtual content studio for ecommerce photography and video, in your site’s Extensions panel. Just ship your products to soona, share what you want to create, build your photoshoot or select a pre-priced pack, and join your shoot virtually.

Note:

Our scope of support for extensions is limited. Our support team can help you connect or disconnect extensions, but we can’t help troubleshoot issues with their use. We recommend reviewing the Squarespace forum for more help.

Was this article helpful?

Yes No

105 out of 395 found this helpful

Yes No

Add and style product images