This tutorial will show you how to add a full scrollable website page on Squarespace. You may need the feature of a scrollable website page to show case your client portfollio or Squarespace templates for sale.

A useful tool you can use to grab the full webpage screen capture is Go full page extension (https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl). Other options could be sample/mock up pages created on canva, 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 (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

This will work on both Squarespace 7.1 and 7.0

Complexity: Easy

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 Design > Custom CSS and paste the code

Replace the #BLOCKID’s with the BLOCKID’s, for this example the BLOCKID’s is ‘#block-6c86a25d0b91bb9aaab2’.

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, express 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.