The Index Page is a powerful design feature available in certain templates. The Index Page collects images and content from different pages and arranges them visually, creating a single destination where visitors can browse content from multiple sub-pages.
Each template family has its own Index style that falls into one of three categories:
- Grid - Each page in the Index creates a thumbnail image on the page. Clicking a thumbnail image opens the connected page. This design forms a visual navigation grid linking to content throughout your site.
- Stacked - Each page in the Index creates a section of a single scrolling page. The sections stack vertically, allowing visitors to scroll through a lot of information, all with a unified look.
- Slideshow - Each page displays as a full-bleed background image with a content overlay. Clicking a page title opens the connected page. This is a great way to use images to introduce different concepts or portfolios.
Index Page feature comparison
Use this list to compare different Index styles. This list groups templates by family. If your template isn't in this chart, it doesn't support an Index Page.
|Avenue||Grid||Required||Album, Blog, Gallery, Events, Products, Regular|
|Bedford, Anya, Bryant, Hayden||Stacked||Optional||Regular|
|Brine, Clay, Feed, Foster, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne||Stacked||Optional||Gallery, Regular|
|Flatiron||Grid||Required||Album, Blog, Gallery, Events, Products, Regular|
|Forte||Slideshow||Required||Album, Blog, Gallery, Events, Products, Regular|
|Marquee, Adversary, Alex, Eamon, Shift||Stacked||Optional||Regular|
|Montauk, Julia, Kent, Om||Grid||Required||Album, Blog, Gallery, Events, Products, Regular|
|Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi||Stacked||Optional||Album, Gallery, Regular|
|Supply||Grid||Required||Album, Blog, Gallery, Events, Products, Regular|
|Tremont, Carson, Henson||Slideshow||Optional||Album, Blog, Gallery, Events, Products, Regular|
|York, Artesia, Harris, Lange, Jasper, Shibori||Grid||Optional||Album, Blog, Gallery, Events, Products, Projects, Regular|
Step 1 - Add an Index Page
If your template supports an Index Page, follow these steps:
- From the Home Menu, click Pages.
- Click the + icon, then click Index.
- Give your Index a title, then press Enter or Return.
Note: If your template supports a stacked Index, the icon will look slightly different.
Step 2 - Adjust Index Page Settings (optional)
Hover over the Index and click the to adjust the Index's Page Settings, such as the title and URL slug. In some templates, the Index Page's title, description, and thumbnail image display at the top of the page.
Step 3 - Add pages to the Index
Tip: You can add up to 100 pages to an Index Page, but we don't recommend adding more than 25. The more content you add, the longer the page will take to load.
Within the Pages panel, click + Add Page below your Index Page. (Depending on your template, you may see + Add Section, + Add Gallery or Page, or + Add Project instead.)
The Create New Page menu shows the pages your template's Index supports. For example, the Momentum template supports one page type:
Click any icon from the menu to add new pages.
You can also drag and drop existing pages into the Index.
For stacked Indexes:
- You can add sections in the Manage Sections view.
- Regular Pages are called Content sections.
Build the pages
For stacked Index Pages, click the title in the Pages panel to scroll to that section in the page preview. Add content using the page preview edit annotation. You can also drag sections out of the Index to edit them. Outside the Index, Content sections become Regular Pages.
- Custom code added to pages within an Index may not render on your live site. To test your code, remove the page from its Index, then view the page directly in a private or incognito window.
- If you don't see an edit annotation for a stacked Index, move the page out of the Index to add content, then move it back into the Index. You can also disable the page, add content to it, then re-enable it.
Reorder the pages
The page order in the Pages panel reflects how they display on the Index Page. Drag and drop pages to rearrange their order.
Tip: For stacked Indexes, see our additional tips.
Review any password-protected pages
Password-protected pages display in the Index.
- Grid and Slideshow - The page's thumbnail displays normally. When visitors click through to the page content, they'll be prompted to enter the password for that page.
- Stacked - The thumbnail image and content appears normally. The login prompt won't appear unless the visitor goes to the direct page URL.
To completely hide a password-protected page, remove it from the Index or add a password to your main Index Page as well. You can password-protect the main Index in its Page Settings.
Step 4 - Add page thumbnails
For best results, ensure that every page or section in your Index has a thumbnail image. Depending on your template's Index style, the image may become a navigation thumbnail, a banner, or a background image.
In some templates, the thumbnail image is optional. However, when you first create an Index, it's best to start with a thumbnail image for every page.
- Hover over the title of a page or section within your Index.
- Click the .
- Click the Media tab.
- Add a thumbnail image.
Repeat this process for every page within your Index.
Note: In some templates, you can add a video thumbnail. For grid Index Pages, you should also add a thumbnail image, as these Index Pages don't use videos for the thumbnail tile.
Step 5 - Set the Index Page as your homepage (optional)
It's common to set the Index Page as a site's homepage so visitors can easily browse your content from a unique landing page. To do this, set the Index Page itself as the homepage, rather than a page within the Index.
- Hover over the Index Page title.
- Click the .
- Scroll down in the Basic tab and click Set As Homepage.
Tip: Ensure you're setting the Index itself as the homepage, rather than a page within the Index. If you set a page within the Index as the homepage, visitors will go to that page's direct URL, rather than the Index landing page, and they'll miss out on the Index's unique formatting.
Step 6 - Style the Index Page
Your template determines the Index's style: grid, stacked, or slideshow. In the Style Editor, you'll find tweaks to help you customize how the Index looks.
You can change the number or shape of the thumbnails, their padding, and how the page titles display, depending on your template. Use the links below to find the guide for your template's Index.
You can change the fonts, navigation elements, and how page content displays. Options vary by template. Use the links below to find the guide for your template's Index.
- Bedford, Anya, Bryant, Hayden
- Brine, Clay, Feed, Foster, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne
- Marquee, Adversary, Alex, Eamon, Shift
- Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi
Tip: See our additional tips for managing sections.
You can style page names and choose how visitors click through to a connected page. Options vary by template. Use the links below to find the guide for your template's Index.
Some templates have a different URL for pages when they're viewed on the Index Page. Here's an example:
The # symbol indicates that this page is in an Index Page. This URL helps search engines and social media sites recognize the page as part of an Index and not duplicated content.
You'll see this in the following templates:
- Marquee, Adversary, Alex, Eamon, Shift - This stacked Index Page uses anchor links. As you scroll through the pages of the Index, the URL slug changes to the page on display.
- Montauk, Julia, Kent, Om
SEO and social sharing
Because Indexes are collections of pages, search engines and social media sites interact with them differently than other pages in Squarespace. Search engines may direct visitors to pages within your Index, rather than the Index Page itself. On some templates, pages appear differently when viewed directly rather than through the Index Page.
If you share a page within an Index on social media, the site may display the Index Page instead of the specific page you're trying to share. Use these best practices to share a specific page:
- Use the page's direct URL. If your page's URL includes a #/, remove that before sharing.
- Add a thumbnail image and page description in the Index Page Settings.
- Demo pages contain a "noindex" tag that makes pages invisible to search engines. We recommend removing all demo content from your Index Page to remove this tag.
Managing stacked Index sections
The Pages panel has an added feature that helps you move, add, and delete sections in stacked Indexes. To access this feature:
- From the Home Menu, click Pages.
- Click the Index Page.
- Hover over the top of the site preview and click Manage Sections.
You'll see a zoomed-out version of your Index, which you can use to more easily scroll through sections
- Click and drag any section to rearrange it.
- Use the + and - icons to add or remove sections.
To return to the Pages panel, click Back in the top-left corner.
Replicate an Index in other templates
If your template doesn't support an Index Page or the Index Page style you like, there are ways to recreate the look of an Index on any template: