A Beginner’s Guide to Squarespace Archive Blocks
A Squarespace archive block can be used to display a list of content in an existing collection.
Archive blocks are a fantastic way to neatly list and link to your blog posts, events, or products. Here's what you can do with them:
Create organized lists: Easily group your content by tags, categories, authors, or dates.
Add extra navigation: Put archive blocks in footers, on the side of a blog post or page, or in any spot you like for quick access to additional content on your site.
Stay up-to-date: Your archive block automatically updates when you add, change, or remove content.
Important to know:
Archive blocks are specifically for blog posts, products, and events. You wont be able to link to a portfolio, project, or video collection.
Archive blocks only show text and wont display images, including thumbnails. If you want to share a list of collection content that includes images, you should consider a summary block instead of an archive block. To learn more about this feature, check out the beginner’s guide to Squarespace summary blocks.
How to add an archive block to Squarespace
If you want to feature images with your collection item links, check out the beginner’s guide to Squarespace summary blocks.
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the archive option form the list of content blocks
Double click on the block to edit the content, or select the pencil icon.
Choose the collection page you want to pull information from.
One the display tab, decide how you want your links to be displayed: index, list, or dropdown.
Adjust the group and sort settings to display your content links in a specific order. Your options include organizing links by month, year, author, category, or tag.
A few pro tips about your archive block options:
You can only use one display option per block.
Archive blocks work with most pages, but not portfolios, courses, or video collections.
You can't hide past events in an events archive.
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
What you can customize about the archive block using Squarespace
You can choose between three layouts (examples below): dropdown, list, and index.
The text style will match your paragraph 2 style and can not be changed using the site editor.
The index layout can be adjusted to multiple columns.
You can display an automatic count of the items in a group when you are using the index layout.
Here is an example of archive blocks in a few different layout styles
The first example is the dropdown archive layout setting.
The list of months and years is the list archive layout setting.
The longest example on this page, with columns of months, titles, and dates is the index archive layout setting. L
Pro tip: longer content titles are at risk of being cut off to fit the layout width, as you can see from the example on this page.
List Archive Example
(display set to group by month)
Index Archive Example
(display set to group by month)
-
December 2021
2
- Dec 28, 2021 My Top 5 Squarespace Design Tips Dec 28, 2021
- Dec 29, 2021 The Programs & Tools That I Use To Run InsideTheSquare Dec 29, 2021
-
January 2022
3
- Jan 4, 2022 Your Guide to CSS Symbols: How & When To Use What Jan 4, 2022
- Jan 10, 2022 Creating Custom Borders in Squarespace Jan 10, 2022
- Jan 24, 2022 Coding Responsively: Length Values Jan 24, 2022
-
February 2022
1
- Feb 21, 2022 5 Squarespace CSS Mistakes Beginners Make Feb 21, 2022
-
May 2022
1
- May 11, 2022 Simple Shifts to Make More from Your Website in 2022 May 11, 2022
-
August 2022
2
- Aug 18, 2022 Squarespace Page Types: When To Use What! Aug 18, 2022
- Aug 18, 2022 Squarespace 7.1 Page Section Types Aug 18, 2022
-
January 2023
2
- Jan 10, 2023 Squarespace SEO Advice for 2023 Jan 10, 2023
- Jan 11, 2023 Free Tutorials for Squarespace SEO Jan 11, 2023
-
February 2023
2
- Feb 6, 2023 How to add notes to Squarespace CSS Feb 6, 2023
- Feb 6, 2023 Targeting Tricks for Squarespace Feb 6, 2023
-
March 2023
2
- Mar 2, 2023 5 Font Pair Ideas for Your Squarespace Site Mar 2, 2023
- Mar 6, 2023 Simplify the Switch: How to Upgrade from Squarespace 7.0 to Squarespace 7.1 Mar 6, 2023
-
April 2023
1
- Apr 24, 2023 Squarespace Update: Form Blocks for Global Sites Apr 24, 2023
-
May 2023
4
- May 8, 2023 Creating Shadows with CSS May 8, 2023
- May 10, 2023 5 Things Your 404 Page Needs: Turning Error Into Opportunity May 10, 2023
- May 12, 2023 How to upload an image to Squarespace so you can use it in your custom codes May 12, 2023
- May 14, 2023 Exploring Image Blocks in Squarespace May 14, 2023
-
March 2024
1
- Mar 15, 2024 New Squarespace Feature: how to add a paywall to a blog Mar 15, 2024
-
April 2024
2
- Apr 18, 2024 What is a syntax error & how to fix it Apr 18, 2024
- Apr 18, 2024 Squarespace Selectors & IDs: Decoded! Apr 18, 2024
-
May 2024
1
- May 31, 2024 Notion for Beginners: Your Guide to Organization Nirvana May 31, 2024
-
July 2024
1
- Jul 30, 2024 Squarespace ID Finder: How to Find Block ID in Squarespace & Why It Matters Jul 30, 2024
What you can customize about the archive block design using CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace. Squarespace designers use custom CSS when the design menu has limited options.
This tutorial will teach you how to use custom CSS to change the style of an archive block in your Squarespace website.
Where you can learn more about the Squarespace archive block
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about archive blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.
In this tutorial, you’ll learn how to customize the archive block in Squarespace using CSS.