Set Squarespace Portfolio Item as Draft [Simple CSS Solution]

Portfolios

Aug 12

One oversight that Squarespace makes is to do with portfolio items.

For some reason, there’s no way to set a Squarespace portfolio item as a draft. Instead the minute you create it it will be live on your website, even if you’re still working on it.

There is a solution to this that requires a simple bit of CSS. It’s not perfect, but it does the job until Squarespace allows us to set portfolio items as drafts hopefully some time in the future.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

To set a portfolio item as a draft you need to head to the settings of the portfolio item by clicking on the three dots that appear next to the relevant page.

What you need to do is add draft to the URL. For example you would change this URL:

https://bycrawford.com/portfolio/dame-kelly-holmes-trust

To:

https://bycrawford.com/draft/portfolio/dame-kelly-holmes-trust

Hit save but you’ll notice nothing has actually changed, your portfolio item is still visible.

This is because you need to add a small piece of custom code to prompt Squarespace to recognize the draft in the URL and set the age accordingly.

Head to Website > Pages > Website Tools > Custom CSS and add the following code to your custom CSS box:

.grid-item[href*="draft":] {

display: none;

}

And this code will then set the page to draft.

This isn’t a perfect solution as while it will take the page out of your main portfolio item list for example, it won’t remove any other links you have pointing to the page from elsewhere on your website. So you need to remember that people may still be able to access it.

Hopefully Squarespace will soon introduce the ability to set portfolio items as drafts but until they do, hopefully this code hack will act as a placeholder for the time being.