How to Add a Scrollable Image on Squarespace
Learn how to add a scrollable image on Squarespace to show off large images or mock ups.
Sometimes, you may want to showcase a full-page website design or a very tall image without forcing visitors to scroll endlessly down your page. The solution? Add a scrollable screenshot section inside Squarespace!
This tutorial will walk you through how to do it step by step, using HTML and CSS. By the end, you’ll have a sleek scrollable container that displays your full screenshot while keeping your layout clean and professional.
Scroll a full page
this is one of my favorite features to use on my own site because it’s clean and offers the viewer the ability to scroll a live-page without having to leave my site.
Before we get into it, if you’d prefer to watch and learn then click the video below! And you can check out other cool tutorials and educational videos on my channel. :)
Learn how to add a scrollable image on Squarespace (Live page effect)
-
[00:00:00.00]
Hey, everyone. In this video, I'm going to walk you through how to add a scrollable image or a scrollable page, just like this, on a Squarespace website. And honestly, this is one of my favorite features to use on my own site because it's clean and it offers the viewer the ability to scroll a very large image without actually having to leave my site. Plus, this effect can be used on so many different types of websites. For example, if you a photographer, an artist, or some type of creative, and you have a lot of work to show off, then this is good because you can use this feature without taking up a ton of room on a page layout. And that's exactly why I like to use this technique in my own case study pages for my design portfolio. Plus, it looks really good on mobile or bigger screens, just like my monitors behind me. So if you are ready to learn how to do this, then let's jump in and get started. Okay, so we're on the computer. The first thing that we're going to do is get the image and then upload it to the Custom CSS section of the Squarespace website, get the image URL, then add the HTML box to the page, and then from there, just copy and paste the Custom CSS, so that way it changes the lookup the HTML box.
[00:01:25.04]
Then we're just going to make sure it looks good in the final step. Now, the first thing here is that I'm on this page where we can see what it's supposed to look like here. Now I'm going to add a new case study page from a client that I recently finished. She is a photographer, and I think it would be really cool to do the same thing and add a full scrollable homepage here. So the first thing that we would do is come over here to Custom Code and then Custom CSS. And we'll see. We're going to click on Custom files. I can't see it because the Loom thing is blocking it. But we're going to add an image, and I'm just going to find the one I need. And so if you haven't gotten a full screenshot of whatever website page, or maybe it's just a really long image that you're trying to do, you'll just You want to make sure you have that on hand. And then you'll also want to make sure it's under 20 megabytes file size. So mine is eight. It's pretty large, but unfortunately, if I were to take it down anymore, the quality just wouldn't look very good.
[00:02:47.22]
I hit open, and now we're just going to let this load. Now it is loaded and it's in here. Now, I want to get the URL, so I'm going to go all the way down to the bottom here because when I click on it, it's going to give me the URL, but I don't want it to mess up any code above. When I click on that, it's going to give me this here. What I am going to do is copy this, make a new tab, and then just paste it up here. And then don't hit Enter, just leave it up there for now. Then you can go ahead and get rid of this. Then I'm just going to click Save, go back, go into the page, click Edit here, and then scroll down a little bit. Now, we are going to add the HTML. I will have the HTML code in the description. I'm going to come over and I just copied it from my other monitor. But now I'm going to come down here to Code. Drag this up here, click Edit. Right here, just make sure it's on HTML. I'm just going to paste this in here.
[00:03:59.14]
And now what you're going to do is because of what I had copied from my other page, it is showing the wrong image, but it's doing what we want. I'm just going to come over here and copy the image. Or actually, I'll just do it here. Just I'm just going to get the image URL, copy that. Then you just want to replace it to where it says right here, where it starts with HTTPS. We're just going to select all this. Okay, right there. Then paste it. Now we have the correct image and the correct thing. Now I'm just going to make this the full width here and center this. Then it made the page a little weird, so I'm just going to drag all this up and then drag this back up there. Okay, so now it is exactly how we want it. Yours might look a little different because I already have the Custom CSS added, so it is already reading like this is how it should look. But if yours doesn't look like that, then what we're going to do is come down here to Custom Code, Custom CSS, and then as you can see, if I can find it, mine starts here and goes to right there.
[00:05:34.07]
And so this right here is the Custom CSS that you will want to ensure that it looks like this. And so you can find that also in the description. And then what you want to do is wherever you want to paste it, so you can just come down here to the bottom. If I were to copy it from the blog post that you can find it in and then just paste it in there. It's just going to do exactly what you want it to do, which is look like this. And then you can go and edit things. But just for not having double code in there, I'm just going to delete that for now and then go back to the one that I had. Okay, so I found it. So this is where it starts here. We have what it's targeting, the screenshot, scroll frame. Then we have the width. You can adjust all this if you want to. It should just set it up exactly to how you need it. Then when you adjust this window, it will be responsive to different sizes. That's pretty much it. You just want to make sure that you click Save.
[00:06:51.09]
Then you can go in and obviously edit the max width, height, the margin, Overflow. I mean, I wouldn't really mess with it because you just want it to look like that. But here you can change the borderize. So that's the gray border I have around it. You can change that. You can also change the color by editing this here. And then you can do the border radius. So if I were to change it, it's going to round the corners a bit more, but I like it to be just a little subtle. The box shadow, if you change to change the digits here, it's going to adjust the drop shadow on it. Then you can obviously change the color of the drop shadow. We have display, justify, so it's already going to be centered, but you can obviously change that left to right if you need to, and then zero padding. Again, feel free to go in and change whatever you want, but you don't have to. Make sure image inside scales correctly. This is what this code does. It's going to make sure that it is 100% within the container. Then height is obviously auto, and then the display is blocked because it's an image.
[00:08:13.28]
Then we have the mobile responsiveness. This is just making sure that it looks right on mobile and it doesn't look weird or it isn't responsive. This is just making sure that it is the right size. Then you could also change the border width as well in mobile. If we go back here and then we go down to... Let me get this because I don't have it linked anywhere yet. But if we go ahead and add this and go to the live page, then this is what it will look like. We scroll down and then we have the scroll a live page feature here. Then we can see the the whole thing without taking up all that room that it would. And this just looks weird because this is an automated scroll, so the screenshot just made it look weird. But yeah, so I think it looks really good. And so if you have any questions, let me know in the comments. If this helped you in any way, please give it a like and hit the subscribe button so you can see more videos like this.
Step 1: Prepare Your Screenshot
Before you start, you’ll need a full screenshot or tall image you want to display.
File type: PNG or JPG works fine.
Recommended size: Keep the file under 20 MB. Anything larger can affect load speed.
Dimensions: Doesn’t have to be exact, but ensure it captures the entire page or section you want to show off.
Step 2: Upload the Image to Squarespace
In your Squarespace dashboard, go to Pages → Custom CSS.
Scroll down to the Manage Custom Files section.
Upload your screenshot.
Once uploaded, click the file name and copy its image URL. Keep this handy — you’ll need it for the HTML.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Step 3: Add the HTML Block
Now it’s time to insert the container where your scrollable screenshot will appear.
Navigate to the page where you want the screenshot to appear.
Click Edit and add a Code Block.
Make sure it’s set to HTML.
Paste the following HTML code:
<div class="screenshot-scroll-frame">
<img src="https://replace-this-with-your-image-url" alt="Website screenshot">
</div>
👉 Replace the URL inside src=" " with your uploaded image link.
Step 4: Add the CSS
Next, style the screenshot container with CSS so it looks polished and works responsively.
Go back to Pages → Custom CSS, and paste the following:
/* Scrollable screenshot container */
.screenshot-scroll-frame {
width: 90%; /* fluid width */
max-width: 876px; /* don’t exceed original size */
height: 572px;
margin: 10px auto; /* centers it */
overflow-y: scroll;
overflow-x: hidden;
border: 5px solid #ffffff;
border-radius: 6px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: start;
padding: 0;
}
/* Make sure image inside scales correctly */
.screenshot-scroll-frame img {
width: 100%;
height: auto;
display: block;
}
/* Mobile responsiveness */
@media screen and (max-width: 768px) {
.screenshot-scroll-frame {
width: 96%; /* nearly full width on mobile */
height: 450px; /* reduce height */
margin: 40px auto;
border-width: 5px;
}
}
This will create a clean scrollable frame with rounded edges, a subtle drop shadow, and proper scaling across desktop and mobile.
Step 5: Customize (Optional)
You can tweak the CSS to better match your brand style:
Border: Change border: 5px solid #ffffff; to a different color or size.
Border radius: Adjust 6px to round the corners more or less.
Shadow: Edit box-shadow for a lighter or heavier drop shadow.
Height: Increase or decrease the container height to show more or less of the image at once.
Step 6: Save and Preview
Click Save in your Squarespace editor, then refresh your page. You should now see a fully functional scrollable screenshot section that displays your tall image without overwhelming your layout.
Final Thoughts
Adding a scrollable screenshot is a simple but effective way to showcase full web designs inside Squarespace. By combining a quick HTML block with custom CSS, you can display large images in a professional and user-friendly way.
Show full-page website designs or case studies without making the page too long.
Keep your portfolio clean and easy to navigate.
Add interactivity that makes your work stand out.
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
Yes! Just reuse the same HTML structure with different image URLs. Each screenshot will have its own scrollable container.
-
Ideally yes. Keep it under 20 MB and make sure the width isn’t excessively large so it loads smoothly.
-
Yes. By default, it scrolls vertically. If you want horizontal scrolling, change overflow-y: scroll; to overflow-x: scroll;.
-
Yes. The CSS includes responsive settings so the container adjusts to smaller screens automatically.
-
Yes! You can add custom CSS for scrollbar styling if you’d like it to match your brand colors.
