How to customise portfolio pagination in Squarespace 7.1
Squarespace 7.1's default portfolio pagination works, but it looks a little bare. You get a previous and next link at the bottom of each project page, and that's about it. No labels, no styling, and the mobile layout leaves a lot on the table.
This tutorial walks through a complete CSS setup for portfolio pagination, broken into sections you can copy one by one. Add the pieces you want, skip the ones you don't. Everything here goes into Website Tools → Custom CSS in your Squarespace dashboard.
By the end you'll have labelled links, a tidy background, a proper stacked mobile layout, and an optional compact mode for small screens.
Before you start
Every snippet in this tutorial targets portfolio collections specifically using this selector:
.item-pagination[data-collection-type^="portfolio"]
That data-collection-type^="portfolio" bit means "any collection type that starts with the word portfolio," which covers both portfolio page variants in 7.1. If you want the same styling on blog pagination, swap portfolio for blog.
1. Add "Previous Project" and "Next Project" labels
By default, Squarespace just shows the project title next to the arrow. Adding a short label above the title gives visitors a clearer signal about what the link does.
/* "Previous Project" label above prev link title */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title:before {
content: "Previous Project \A";
white-space: pre;
font-size: 15px;
text-transform: uppercase;
color: #000000;
}
/* "Next Project" label above next link title */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link--next .item-pagination-title:before {
content: "Next Project \A";
}
The trick here is the \A character, which inserts a line break inside the pseudo-element. Paired with white-space: pre, it forces the label onto its own line above the project title.
You can uncomment the letter-spacing line if you want a more spaced-out look, and the colour is easy to change to match your brand.
2. Add a background colour to the pagination section
A subtle background separates the pagination from the rest of the project page and makes the whole block feel more intentional.
/* Background for the pagination section */
.item-pagination[data-collection-type^="portfolio"] {
background: #f1f1f1;
}
Light grey works well for most sites. Swap the hex value for anything that fits your palette. If you're on a dark theme, try something like #1a1a1a with white text.
3. Replace the default arrow icons (optional)
If the default SVG arrows feel too generic, you can swap them for custom icons. This bit is commented out in the original CSS because it needs image URLs, but here's how it works when you're ready to use it.
/* Replace the arrow icon: left */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link .item-pagination-icon svg {
stroke: transparent !important;
background-image: url(YOUR-LEFT-ARROW-URL-HERE);
background-size: cover;
width: 180%;
}
/* Replace the arrow icon: right */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link--next .item-pagination-icon svg {
background-image: url(YOUR-RIGHT-ARROW-URL-HERE);
}
To get image URLs, upload your icons directly into the Custom CSS panel. Scroll to the bottom of Website Tools → Custom CSS, click Add Files, and upload your arrow images. Once uploaded, click on the file name and Squarespace will insert the URL straight into your CSS at the cursor position. Paste those URLs into the url() values above.
Keep the icons simple, ideally SVG or a transparent PNG, and make sure the right-facing arrow mirrors the left one so the pair feels balanced.
4. Stack the pagination links on mobile
On phones, the default side-by-side layout gets cramped fast. This next block stacks the previous and next links into a single column and gives them proper spacing.
@media only screen and (max-width: 640px) {
.item-pagination[data-collection-type^="portfolio"] .item-pagination--prev-next {
flex-direction: column !important;
}
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link {
max-width: 100%;
margin-bottom: 40px;
}
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link--next {
margin-bottom: 0px !important;
}
}
The 640px breakpoint catches most phones and small tablets. You can raise it to 768px if you want the stacked layout to kick in on bigger tablets too.
5. A more polished stacked mobile layout
This is an expanded version of the simple stack above. It handles alignment more carefully, keeps the arrows in the right spot, and makes sure the labels sit neatly above the titles.
@media only screen and (max-width: 640px) {
/* Container: stack prev above next, full width */
.item-pagination[data-collection-type^="portfolio"].item-pagination--prev-next {
display: flex !important;
flex-direction: column !important;
gap: 20px;
padding: 24px 20px;
}
/* Each link: full width, arrow + text row */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link {
display: flex !important;
align-items: center;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
gap: 14px;
}
/* Prev link: arrow on the left, text left-aligned */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link--prev {
flex-direction: row;
justify-content: flex-start;
text-align: left;
}
/* Next link: text on the left (right-aligned), arrow on the right */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-link--next {
flex-direction: row;
justify-content: flex-end;
text-align: right;
}
/* Title wrapper stacks the "Previous Project" label over the title */
.item-pagination[data-collection-type^="portfolio"] .pagination-title-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
/* Label ("Previous Project" / "Next Project") */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-prev-next {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px;
opacity: 0.85;
}
/* Title */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
font-size: 22px;
line-height: 1.15;
margin: 0;
word-wrap: break-word;
}
}
A few things worth calling out here. The gap property on the container handles the spacing between prev and next, so you don't need to fiddle with margins on the links themselves. The min-width: 0 on the title wrapper prevents long project titles from blowing out the layout. The prev link arrow sits left, the next link arrow sits right, so the directional cue stays clear even when the layout is stacked.
Use this block instead of section 4 if you want the more refined result. You don't need both.
6. Optional: a compact mobile mode
Sometimes a full stacked layout is still too much, especially on project pages with heavy imagery right above the pagination. This compact mode hides the project titles on mobile and just shows "Previous" and "Next" with the arrows, keeping everything on one row.
@media only screen and (max-width: 640px) {
body.pagination-compact .item-pagination[data-collection-type^="portfolio"].item-pagination--prev-next {
flex-direction: row !important;
justify-content: space-between;
align-items: center;
gap: 12px;
}
body.pagination-compact .item-pagination[data-collection-type^="portfolio"] .item-pagination-link {
width: auto !important;
flex: 0 0 auto;
}
/* Hide the project title, keep the "Previous" / "Next" label */
body.pagination-compact .item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
display: none !important;
}
/* Override the earlier ::before rule so the label reads cleanly */
body.pagination-compact .item-pagination[data-collection-type^="portfolio"] .item-pagination-title:before {
content: none !important;
}
body.pagination-compact .item-pagination[data-collection-type^="portfolio"] .item-pagination-prev-next {
font-size: 15px;
letter-spacing: 1px;
margin: 0;
}
}
This only kicks in when the <body> tag has the class pagination-compact, so you get to choose where it applies.
To turn it on site-wide, add this to Website Tools → Code Injection → Header:
<script>document.body.classList.add('pagination-compact')</script>
To turn it on for a single page, go to that page's settings, open Advanced → Page Header Code Injection, and paste the same snippet there.
Putting it all together
A sensible setup for most portfolio sites is sections 1, 2, and 5. That gives you labelled links, a clean background, and a proper stacked mobile layout without any extra HTML classes to manage.
Add section 3 if you want custom arrows, and section 6 only if you've got a specific reason to hide titles on mobile.
Paste everything into Website Tools → Custom CSS, save, and preview the changes on a project page. Remember to test on an actual phone, not just the mobile view in the editor, because some flexbox behaviour only shows up properly on real devices.
Troubleshooting
If the labels aren't appearing, check that your collection is actually a portfolio and not a regular page with portfolio-style content. The data-collection-type attribute only gets set on true portfolio collections.
If the mobile layout isn't kicking in, make sure you haven't got a conflicting media query elsewhere in your Custom CSS that's overriding the 640px breakpoint. Squarespace processes Custom CSS in order, so later rules win.
If the arrows look squashed after swapping them for custom images, adjust the width percentage in section 3 until they sit nicely. Every icon has slightly different proportions.
That's the full setup. Small amount of CSS, meaningful upgrade to how your portfolio navigates.
