How to temporarily hide a portfolio page on Squarespace in 2024
Chances are that if you have a Portfolio Collection Page on your Squarepace website you’ve realised that once created, the pages inside are all live. There isn’t an option to set individual portfolio pages into a draft mode. This means that if you’ve created a page on your site, everyone can see it while you’re working on it.
This seems like a basic feature that Squarespace missed when developing the portfolio collection pages and it’s really annoying!
In fact, Squarespace’s advice says: Portfolio projects can't be individually password protected, disabled, or hidden from search engine results. To hide portfolio projects temporarily, password protect the entire portfolio page or disable it.
But what if you don’t want to hide your entire portfolio, just one of the pages you’re working on inside the collection?
That’s why I’ve coded a little snippet you can use to turn off single portfolio pages from being live, while allowing all the other pages in your portfolio to stay live on your website.
In this post:
Add this CSS code to disable one portfolio page on your Squarespace website
How to make single portfolio pages like a ‘draft’ in your Squarespace portfolio
Edit and style your Squarespace portfolio page without disabling the whole portfolio
How to share your Squarespace Portfolio page after you’ve edited it
Wildings is a website designer for small businesses. Our studio is based in Torquay, Devon, and we provide small business website design for creative, hospitality & lifestyle businesses across the UK. We create beautiful functional websites on the Squarespace platform because of its easy to use interface. We code Squarespace websites to elevate the appearance of the site and make them truly unique and styled to your brand.
Add this CSS code to disable one portfolio page on your Squarespace website
Your portfolio will need to be called /portfolio in the slug. If you’ve called it something else, like /projects or /work or something similar, you’ll just need to adjust the code snippet to match your main portfolio page slug (for example, if it’s called /projects change the top code to a[href="/projects/temp"] {display: none; }.
You will need to go to your CSS panel. You can find this by clicking on Website > Pages > Website tools > Custom CSS, or by pressing the forward slash and typing in ‘CSS’ in the search box and pressing ‘Custom CSS’.
Copy and paste this code into the CSS window panel and press save.
Use this Snippet by copying and pasting into your CSS window
//hide portfolio temporarily//
a[href="/portfolio/temp"] {
display: none;
}
a.grid-item[href*="/temp"] {
display: none;
}
div.portfolio-grid-basic .grid-item[href*="temp"] {
display: none;
}
.item-pagination-link[href*="temp"] {
display: none;
}
2. How to make single portfolio pages like a ‘draft’ in your Squarespace portfolio
Go to your Portfolio collection so you can see the contents inside the Portfolio collection. This will work on any portfolio style you activate from the layout option menu.
Either create a new portfolio subpage by pressing the ‘+’ icon or duplicate an existing page.
Just press save without adjusting any of the settings.
Find the portfolio you want to make a draft, hover your mouse and press the three dots to change the settings
In the ‘Project Settings’ change the URL slug to /portfolio/temp
Then press save
Press the three dots to open up the portfolio settings
Change the url slug to /portfolio/temp
3. Edit and style your Squarespace portfolio page without disabling the whole portfolio
You should now see that the new portfolio page is not visible in the preview window (on the right), but it is visible on the left, in the collection list which shows you the back end (see how Project One at the bottom isn’t visible now that we have changed the url slug).
You can now click on the portfolio item you want to edit, style, and add content to. It won’t be visible on your website, but you will be able to see the whole page and edit it on the back end.
You can see that there is a new project in the left hand side panel, but it's not appearing in the live preview screen side.
4. How to share your Squarespace Portfolio page after you’ve edited it
Once you have updated the item and you are ready to share the portfolio:
Navigate to see the portfolio collection menu as before
Hover over the item and press the three dots to change the settings
Remove the word ‘temp’ from the url slug
Change the url slug to something else more meaningful
Press save, and your portfolio page will now be live on your website
Change the url slug when you have finished editing
With a new url slug, your portfolio is visible again on the live preview page
If you’ve found this helpful, you can follow our Instagram account where we share more tips for your brand and website: www.instagram.com/wildings.studio
