Squarespace Portfolio Pages

Here are some tips on Squarespace Project Pages (Portfolio Pages) in Squarespace 7.1 version.

Remove Pagination Title, Keep Arrows

Add to Home > Design > Custom CSS

/* remove pagination title */
.item-pagination[data-collection-type^="portfolio"] .pagination-title-wrapper {
    display: none;

Remove Pagination Title, Add Previous/Next

Add to Design > Custom CSS

.item-pagination[data-collection-type^="portfolio"] h2.item-pagination-title {
    display: none;
.item-pagination[data-collection-type^="portfolio"] .item-pagination-prev-next {
    display: block !important;

Change Pagination Title Size (Mobile)

Add to Design > Custom CSS

@media screen and (max-width:767px) {
h2.item-pagination-title {
    font-size: 20px !important;

Change Pagination Arrows size

Add to Design > Custom CSS

.item-pagination-link .item-pagination-icon svg {
    width: 10px !important;

Add Project Links under Pagination

  1. Edit Site Footer > Add a Text Block > Insert text links > Enter project links
  2. Contact me with site url. I will give the code (Each site needs different code)

Add a Button under Pagination

Add to Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jQuery(document).ready(function($) { 
   $('<div class="sqs-block-button button-block"><div class="sqs-block-button-container--center"><a href="https://beaverhero.com" class="sqs-block-button-element--small sqs-block-button-element">BACK TO ALL PROJECTS</a></div></div>').insertAfter('.item-pagination[data-collection-type^="portfolio"]');

Pagination Custom Font

@font-face {
font-family: 'font-name';
src: url(paste font file url here);
h2.item-pagination-title {
    font-family: 'font-name' !important;

Remove Draft Project on Preview/Live Mode

First, add this code to Design > Custom CSS

/* Hide Draft Portfolio */
div.portfolio-grid-basic .grid-item[href*="draft"] {
    display: none;
a.item-pagination-link[href*="draft"] {
    display: none;

Next, Edit Project >> Add this into URL: draft

Assuming project has url is  /artists/dawn-waters-bake
change it to  /artists/dawn-waters-bake-draft
Above code will hide all projects whose urls contain text “draft” in portfolio page

Show Portfolio Title over Image on Hover

a.grid-item {
    position: relative;
.portfolio-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    text-align: center;
    z-index: 999;
    margin-top: 0 !important;
    transition: all 0.3s;
    opacity: 0;
a.grid-item:hover .portfolio-text {
    opacity: 1;


Featured Image: Pixabay.com

Leave a Comment