How to add a full scrollable website page on Squarespace
If you’re a web designer or creative selling Squarespace templates or showcasing a client portfolio, a full scrollable website page is a sleek, engaging way to present your work. Rather than asking users to click through different pages or links, you guide them through your content in one seamless scroll — perfect for capturing attention, increasing engagement, and creating a branded experience.
In this tutorial, you'll learn how to create a visually rich, full-scroll page layout in Squarespace 7.1 to highlight your best work, templates, or services — without needing third-party plugins or complex code.
A useful tool you can use to grab the full webpage screen capture is Go full page extension. Other options could be sample or mock-up pages created on canva or Adobe XD.
Another useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder.
This will work on both Squarespace 7.1 and 7.0
Table of Contents
Why a Full Scrollable Website Page
Streamlined Viewing: Showcase everything in one view—great for clients and fast decision-making.
Mobile-Friendly: Today’s users love to scroll, especially on mobile.
Storytelling Format: Guide users from one project or product to the next effortlessly.
Modern Aesthetic: A scrollable page feels clean, dynamic, and professional.
Complexity: Easy
Step-by-Step Instructions
Step 1
Obtain a full page screen capture of the website and upload the image on Squarespace
Step 2
Add an image block to where the full page screen capture page is to be and add the image.
Step 3
Go to Pages > Custom Code > Custom CSS and paste the code
// Scrollable Webpage
#BLOCK-ID {
height: 350px;
max-width: 80%;
margin:auto;
width: 100%;
overflow-y:scroll;
overflow-x:hidden;
filter: drop-shadow(10px 10px 10px rgba(0,0,0,.3));
@media screen and (max-width:767px) {
height:200px;
}
}
//Customize the scrollbar
::-webkit-scrollbar {
width: 3px; /* Scrollbar Thickness */
height:15px;
}
::-webkit-scrollbar-thumb {
background: #22514A;
}
::-webkit-scrollbar-track {
background: #ffffff; /* Background Color */
}
Replace the #BLOCKID’s with the BLOCKID’s, for this example the BLOCKID’s is ‘#block-6c86a25d0b91bb9aaab2’.
// Scrollable Webpage
#block-6c86a25d0b91bb9aaab2 {
height: 350px;
max-width: 80%;
margin:auto;
width: 100%;
overflow-y:scroll;
overflow-x:hidden;
filter: drop-shadow(10px 10px 10px rgba(0,0,0,.3));
@media screen and (max-width:767px) {
height:200px;
}
}
//Customize the scrollbar
::-webkit-scrollbar {
width: 3px; /* Scrollbar Thickness */
height:15px;
}
::-webkit-scrollbar-thumb {
background: #22514A;
}
::-webkit-scrollbar-track {
background: #ffffff; /* Background Color */
}
Key Takeaways
Build the scrollable layout using sections, not separate pages
Showcase one project/template per section for clarity and focus
Use visual contrast (e.g., alternating colors or layout patterns) to keep the user engaged
FAQs
Can I link directly to each project or template section?
Yes! Assign section IDs (click the gear icon on the section → Advanced → add an ID). You can then link using #section-name.
Can I make this my homepage?
Absolutely! Go to Pages → Home and drag your scrollable page to the top of the Not Linked section and set it as your homepage.
Conclusion
A full scrollable website page is one of the best ways to showcase your portfolio or Squarespace templates in a cohesive and compelling format. It keeps your visitors engaged, lets your work shine, and is highly effective on mobile.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
