Showcase a Scrollable Website Page in Squarespace

---

Looking to showcase your clients portfolio or maybe templates that you’re selling, but it’s too large as an image? We’ll show you how to create a scrollable image by using a few CSS codes!

This works on both Squarespace 7.0 and 7.1

---

STEP ONE

Take a screen shot of your website that you want to showcase. You can do that by downloading the GoFullPage google chrome extension here.

---

STEP TWO

Find your unique Block ID

This is pretty easy since we can use the google chrome extension Squarespace Finder ID

Once you’ve installed the extension, follow the next steps to find you Block ID:

• Install the google chrome Squarespace Finder ID extension

• Go to the website you’re working on, and find the image you want to be scrollable

• Click on the Squarespace Finder ID icon in the toolbar of your google chrome extensions to activate it

• Once clicked on, your IDs will pop up on your screen for each object. Click the ID that is on the picture, so it will copy to your clipboard.

---

STEP THREE

Once you have your image, you are going to add an image block to your section and upload it on Squarespace.

***Note: If you are using Squarespace 7.1, you will need to add a blank section from the classic editor to make this work. For some reason the CSS code does not work on the 7.1 section.***

---

STEP FOUR:

Add in your CSS Code

Now that we’ve identified your Block ID, we can start the custom CSS!

You are now going to be adding a custom CSS to make your image scrollable. Do this by going to website > scroll down to website tools > custom CSS and paste the code below

***Replace #INSERT-BLOCK-ID-HERE with the block ID code you just copied from the Squarespace finder ID extension***

// Scrollable Webpage
#INSERT-BLOCK-ID-HERE {
  height: 650px;
  max-width: 80%;
  margin:auto;
  width: 100%;
  overflow-y:scroll;
  overflow-x:hidden;
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,.3));
  
  @media screen and (max-width:767px) {
   height:500px;
  }
}

To customize the scrollbar, paste the code below

//Customize the scrollbar

::-webkit-scrollbar {
    width: 3px; /* Scrollbar Thickness */
    height:15px;
}
::-webkit-scrollbar-thumb {
    background: #282829; 
}
::-webkit-scrollbar-track {
    background: #ffffff; /* Background Color */
}

And that’s it! Your image should now be scrollable by using the CSS code. Now you can showcase all your projects with this cool scrollable feature!