How to Customize “Previous” and “Next” Project Links in Squarespace 7.1 Portfolio Pages
Your portfolio isn’t simply a collection of projects; it’s a narrative tool that conveys your creativity & brand voice. On Squarespace 7.1, the smallest interface details, like the “Previous” and “Next” project links, can determine how visitors experience your work. By default, these links are functional and unstyled:
And while they get the job done, they might not perfectly align with your brand voice or design aesthetic. The good news? In just a few lines of code, you can alter the pagination text to something more appropriate for your portfolio and increase user interaction.
Why Customize Portfolio Pagination Text in Squarespace?
Personalizing these navigation links helps you:
Reinforce your brand tone (e.g., minimal, playful, bold)
Improve user experience with clearer labels
Add a more polished, modern, or creative feel to your portfolio
Showcase professionalism in every interaction — even micro ones
Examples of Custom Pagination Text:
| Default | More Branded Alternatives |
| ← Previous Project | ← Older Projects |
| Next Project → | View More Work → |
| ← Prev | ← Back |
| Next → | Next Case Study → |
Step-by-Step: How to Change the “Previous” and “Next” Labels in Squarespace
Step 1: Open Your Squarespace Custom CSS Panel
Go to Pages → Custom code → Custom CSS
(Optional) Click Manage Custom Files if you plan to add fonts or icons
Step 2: (Optional) Add Custom Styling for Pagination Text
You can enhance the appearance of the pagination links using CSS.
/* Style the portfolio pagination links */
.item-pagination-link {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
}
This adds bold, uppercase typography with spacing, perfect for clean, modern portfolios.
Step 3: Add JavaScript to Replace the Default Labels
Now, let’s update the actual text using JavaScript.
Go to Settings → Advanced → Code Injection → Footer
Paste the following code:
<script>
document.addEventListener("DOMContentLoaded", function () {
const prev = document.querySelector('.item-pagination a:first-child');
const next = document.querySelector('.item-pagination a:last-child');
if (prev && prev.textContent.includes('Previous')) {
prev.textContent = '← Older Projects';
}
if (next && next.textContent.includes('Next')) {
next.textContent = 'View More Work →';
}
});
</script>
Pro Tip: You can replace '← Older Projects' and 'View More Work →' with any custom wording that fits your tone.
Customize It Your Way
You can get creative with the replacement text. Here are some ideas:
| Navigation | Custom Text |
|---|---|
| Previous | ← Back |
| Next | Continue → |
| Project Flow | ← Case Study 1 & Case Study 2 → |
| Time-Based | ← 2023 Projects & 2024 Projects → |
How This Works Behind the Scenes
Dynamic loading out of the box, Squarespace loads portfolio content and titles only on demand. Once the page is fully loaded, the JavaScript does the following:
Targets the pagination links
Check if its text content is equal to the default labels
Substitutes the visible text with your personalized text
This method is:
Safe – No core files are altered
Mobile Friendly – It is compatible with all screen sizes
Non-Intrusive – Preserves link behavior
Final Customization Tips
| Goal | What to Do |
|---|---|
| Change wording | Update .textContent in JavaScript |
| Hide pagination | Use display: none; in Custom CSS |
| Add hover effects | Use :hover selectors in CSS |
| Use custom arrows | Replace text with SVG icons in the HTML structure |
Final Thoughts
Editing your Squarespace portfolio navigation may not feel like a big thing, but sometimes it's the little things that make the biggest difference for your site's viewers. If you’re a creative professional, agency, or freelancer, making all those UI elements match your brand tone is going to make your work feel more thoughtful, higher-end, and more finished.
Looking for someone to help fine-tune your Squarespace site? Reach out to us for custom design assistance, custom photonic packets, or portfolio optimisation.
Frequently Asked Questions (FAQ)
1. Can I customize the “Previous” and “Next” text without using code in Squarespace?
Squarespace 7.1 does not have a direct way to change the pagination text in the portfolio. Customization involves including a little bit of JavaScript through the Code Injection panel.
2. Does this JavaScript function hurt SEO or load time?
Not at all. The code alters only the displayed text under the hood as the page loads. It doesn’t impact links, structure, or SEO performance.
3. Can I remove the “Previous” and “Next” project links completely?
Yes. You can hide the pagination links using CSS. Just add this to your Custom CSS panel:
.item-pagination {
display: none;
}
4. Can I add icons or arrows instead of text for pagination?
Yes! You can replace the text content with arrow characters (← →), emojis, or even insert SVG icons using .innerHTML in JavaScript. Example:
prev.innerHTML = '←';
next.innerHTML = '→';
5. Is this available for any Squarespace template?
This method consistently works with Squarespace 7.1 templates, especially for portfolio project pages. If you’re using an older template, then class names may vary, and more customization may be required.
