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

Adding thumbnail images

Squarespace uses thumbnail images to represent individual collection items — like blog posts, events, and products — in different areas of your site. For example, you can use a Summary Block to display posts from your Blog Page that include the thumbnail image from each post. 

If your site is on version 7.0, you can also add page thumbnails to appear on Index Pages and create per-page banner images in some templates.

We recommend always adding thumbnails when the option is available to create a great visual experience on your site. For help formatting images before uploading, visit Formatting your images for display on the web.

Tip: When you share a link from your site on social media, your social sharing image may display instead of the item or page thumbnail. To learn more about what displays, visit How content displays in social posts.

Collection item thumbnails

Collection item thumbnails represent individual blog posts, events, and products across your site. They may also display when the items are shared on social media.

On version 7.0, some templates use collection item thumbnails to create a banner image.

How you add a collection item thumbnail depends on which version of Squarespace your site is on.

To add a blog post or event thumbnail:

  1. In the Home Menu, click Pages.
  2. In the Pages panel, select a Blog or Events Page
  3. Hover over the item (for example, a blog post) and click ..., then click Settings
  4. Click Options
  5. Drag your image into the image uploader, or click the image uploader and select a file from your computer. If the item already has an image, click Remove Image, then add a new image.
  6. To reuse an image or use a stock image, click Search For Images.
  7. Click Save.

To add a product thumbnail:

  1. In the Home Menu, click Pages.
  2. In the Pages panel, select a Store Page
  3. Hover over the product and double-click it.
  4. In the settings, click Options
  5. Drag your image into the image uploader, or click the image uploader and select a file from your computer. If the item already has an image, click Remove Image, then add a new image.
  6. To reuse an image or use a stock image, click Search For Images.
  7. Click Save.
Tip: Use the Image Editor to style or crop the thumbnail image after uploading. You can also use focal points to center the image within its height dimensions.

To add a collection item thumbnail:

  1. In the Home Menu, click Pages.
  2. In the Pages panel, select a Blog, Events, or Products Page
  3. Hover over the item (for example, a blog post) and click Edit.
  4. In the settings, click Options
  5. Drag your image into the image uploader, or click the image uploader and select a file from your computer. If the item already has an image, click Remove Image or the trash can icon, then add a new image.
  6. To reuse an image or use a stock image, click Search For Image.
  7. Click Save.
Tip: Use the Image Editor to style or crop the thumbnail image after uploading. You can also use focal points to center the image within its height dimensions.
The Squarespace App only supports adding collection item thumbnails images to blog posts. To add event or product thumbnail images, use a computer or the Commerce App instead.

To add a collection item thumbnail:

  1. Tap Pages, tap the Blog Page, then tap the blog post.
  2. Tap ... at the top of the screen, then tap Page Settings.
  3. Tap Add image at the top of the Post Settings. If the item already has an image, click Replace, then add a new image.
  4. Choose an image:
    • Take a new photo - Tap Take photo or Camera.
    • Choose an image from your device - Tap Photo library or Files.
    • Choose an image from iCloud - Tap Insert from....
  5. Tap Save.

Page thumbnails (version 7.0)

Version 7.1 doesn't use page thumbnails. To create a banner image, use page sections instead. To represent the page on social media, add an Alternate Social Sharing Image.

Page thumbnail images appear on Index Pages and create per-page banner images in some templates. Some templates also support adding videos.

To add a page thumbnail:

  1. In the Home Menu, click Pages.
  2. Hover over the page in the left panel and click to open page settings.
  3. In page settings, click the Media tab.
  4. Drag an image into the Banner/Thumbnail Image box or click Add Image. If the item already has an image, click Remove Image or the trash can icon, then add a new image. You can also click Search For Images to reuse an image or add a stock image.
  5. Click Save.
Tip: Use the Image Editor to style or crop the thumbnail image after uploading. You can also use focal points to center the image within its height dimensions.

To add a page thumbnail:

  1. Tap Pages, then tap the page.
  2. Tap ... or at the top of the screen, then tap Page Settings.
  3. Under Options, tap Media.
  4. Tap Add image under Banner/Thumbnail Image. If the item already has an image, click Replace, then add a new image.
  5. Choose an image:
    • Take a new photo - Tap Take photo or Camera.
    • Choose an image from your device - Tap Photo library or Files.
    • Choose an image from iCloud - Tap Insert from....
  6. Tap Page Settings, then tap Save.

Troubleshooting Gallery Page thumbnails

In most templates, if the Gallery Page doesn't have a thumbnail image, it automatically creates one from the first image in the gallery. Use the steps above to replace this with a different image, or delete it altogether.

In some templates, if you delete the page thumbnail, the gallery's first image automatically becomes the thumbnail image when you make any change to the gallery. This is most noticeable in templates where the thumbnail image creates a page banner.

In these instances, you can delete the new thumbnail image from page settings to remove it after each change. Note that if you manually add a thumbnail in page settings, the thumbnail won't automatically update when you make changes to the gallery. To mimic the look of no banner, upload a thumbnail image of a solid color that matches your background.

How thumbnail images display

Thumbnail images display differently depending on your site's version and where the thumbnail appears. 

Use this table to learn more about how thumbnail images display on different areas of your site. 

Site area

Thumbnail image display

Blog, Events, and Store Pages

Item thumbnail images display on the main collection page to represent each item. For example, Events Pages display the thumbnail image for each upcoming event.

Product Blocks

Thumbnail images display when Show Image is checked.

Summary Blocks

Thumbnail images display for collection items featured in the block. Choose between several different layouts.

Use this table to learn more about how thumbnail images display on different areas of your site.  

Site area

Thumbnail image display

Banners

Thumbnail images display as page and collection item banners in some templates.

Index Pages

Thumbnail images display as a grid, stacked, or full-screen, depending on your site's template.

Blog, Events, and Advanced Products Pages

Collection item thumbnails display on the main collection page to represent each item. For example, Events Pages display the thumbnail image for each upcoming event.

Product Blocks

Thumbnail images display when Show Image is checked.

Summary Blocks

Thumbnail images display for collection items featured in the block. Choose between several different layouts.

Content Link Blocks

Thumbnail images display for the pages or items you're linking to.

Video thumbnails

Videos can have their own thumbnail images, which display over the video before it’s played. This could be a title card, a frame from the video, or any other image that encourages visitors to click play. You can add thumbnails to videos in:

Watch a video

This video applies to version 7.0.

Was this article helpful?
26 out of 269 found this helpful