How to Replace or Remove Portfolio Pagination in Squarespace

This solution works for Portfolio pages in Squarespace. If you have a blog, this will also affect blog post pagination, unless you follow the steps at the end of the post.

If you want your Portfolio pages to have < Previous and Next > pagination or no pagination at all, here’s how to achieve that in Squarespace 7.1

How to Replace or Remove Portfolio Title Pagination in Squarespace

Step 1.

Go to Design > Custom CSS

Step 2.

Paste in this code to replace the Pagination Titles with just Previous and Next:

.item-pagination-title {
  display:none;
}
.item-pagination-link .item-pagination-prev-next {
  display: block !important;
}
.item-pagination-link .item-pagination-prev-previous {
  display: block !important;
}

Save your code. Your pagination will update and the project titles will be removed.

If you’d prefer to remove pagination altogether, paste in this code instead:

.item-pagination {
  display: none;
}

Step 3. (optional)

To style the font for Previous and Next, you can add font size and text style to the code like this, then make adjustments to your preference:

.item-pagination-link .item-pagination-prev-next {
  display: block !important;
  font-size: 30px;
  text-transform: uppercase;
}
.item-pagination-link .item-pagination-prev-previous {
  display: block !important;
  font-size: 30px;
  text-transform: uppercase;
} 

Want to do this just for one portfolio and not for another (or your blogs)?

This requires the Business Plan or higher on Squarespace. You’ll want to take the code above, wrapped in <style></style> tags, and add it to the Page Settings > Advanced > Page Header Code Injection for the portfolio you want to change. For example, if you want to remove them altogether, you’d add:

<style>
.item-pagination {
  display: none;
}
</style>

Want to remove the pagination title but leave the arrows?

You’ll add this code to Custom CSS:

/* hide item pagination title, leave arrows */
.item-pagination-title {
  display: none;
}

Or to target just one portfolio, follow the steps above and swap out the code between the <style> elements, so you’d add this:

<style>
.item-pagination-title {
  display: none;
}
</style>

Want to set the size of the existing Pagination Titles?

You can do this without code! When you are on a Portfolio Project Page, go to Design > Fonts in the main menu. Click on the pagination title and then choose the size you’d like and save. Here’s a quick walkthrough:

---