How to Create Horizontal Scrolling Sections in Squarespace 7.1: A Step-by-Step Guide
Are you looking to add a modern, eye-catching horizontal scrolling section to your Squarespace website? Horizontal scrolling sections are a great way to showcase content like portfolios, testimonials, or product galleries in a visually engaging way. In this guide, I’ll walk you through the process step-by-step, so you can create stunning horizontal scrolling sections.
At Squarespell.co.uk, we specialize in helping Squarespace users unlock the full potential of their websites with custom code and design tips. Let’s dive in and make your website stand out!
Why Add Horizontal Scrolling Sections?
Horizontal scrolling sections are perfect for:
Showcasing portfolios or galleries
Highlighting client testimonials or case studies
Displaying product features or pricing tables
Creating a unique, interactive user experience
By following this guide, you’ll be able to create these sections without relying on expensive plugins or tools. Let’s get started!
Step 1: Create and Design Your Sections
Before adding any code, you need to create the sections you want to scroll horizontally.
Log in to your Squarespace account and navigate to the page where you want to add the horizontal scrolling section.
Add a new section by clicking the “+” button.
Design your section using Squarespace’s built-in tools. Add images, text, buttons, or any other content you want to include.
Duplicate the section if you want multiple sections to scroll horizontally.
💡Pro Tip: Keep your sections consistent in height and width for a smooth scrolling experience.
Step 2: Add Custom CSS for Horizontal Scrolling
Now that your sections are ready, it’s time to add the CSS code that will enable horizontal scrolling.
Go to Website Tools > Custom CSS.
Copy and paste the following CSS code into the Custom CSS box:
////SQUARESPELL.COM////
html {--sqs-edit-mode-breakpoint: 749px;}
body, html {overflow-x: hidden; margin: 0; padding: 0; scroll-behavior: auto !important;}
/* Core styles */
#horizontal-pin-container {
width: 100%; height: 100vh; position: relative; overflow: hidden; z-index: 1;
}
#horizontal-sections-wrapper {will-change: transform;}
/* Mobile styles */
@media screen and (max-width: 767px) {
#horizontal-pin-container {height: auto; overflow: visible;}
#horizontal-sections-wrapper {
position: relative !important; display: block !important; width: 100% !important;
height: auto !important; transform: none !important; flex-wrap: wrap !important;
left: 0 !important; top: 0 !important; will-change: auto !important; overflow: visible !important;
}
#horizontal-sections-wrapper section {
width: 100% !important; min-width: 100% !important; height: auto !important;
min-height: 50vh !important; flex: none !important; display: block !important;
position: relative !important; transform: none !important; margin: 0 !important;
padding: 20px 0 !important; left: 0 !important; top: 0 !important;
transition: none !important; animation: none !important; z-index: 1 !important;
}
#horizontal-sections-wrapper section * {visibility: visible !important; opacity: 1 !important;}
.gsap-marker-scroller-start, .gsap-marker-scroller-end, .gsap-marker-start, .gsap-marker-end {display: none !important;}
}
/* Editor mode */
.sqs-edit-mode #horizontal-pin-container, .sqs-edit-mode #horizontal-sections-wrapper {
display: block; position: relative; height: auto; width: 100% !important;
transform: none !important; overflow: visible;
}
.sqs-edit-mode #horizontal-sections-wrapper section {
width: 100% !important; height: auto !important; min-height: 50vh !important;
min-width: 100% !important; flex: none !important; margin-bottom: 20px !important;
border-bottom: 2px dashed #ccc;
}
////SQUARESPELL.COM////
3- Save your changes
This CSS will create a horizontal scrolling container for your sections.
Step 3: Find Section IDs Using Squarespace ID Finder
To apply the horizontal scrolling effect to specific sections, you need to find their Section IDs.
Install the Squarespace ID Finder Chrome Extension (or any similar tool).
2- Open your website in Chrome and navigate to the page you’re working on.
3- Click on the extension and hover over the sections you want to scroll horizontally. The Section ID will appear.
💡 Note down the Section IDs for each section you want to include.
Step 4: Add JavaScript for Horizontal Scrolling
Finally, you’ll need to inject a small JavaScript snippet to enable horizontal scrolling for your selected sections.
1- Go to Website Tools > Code Injection
2- Scroll down to the Footer section.
3- Copy and paste the following JavaScript code:
4- Replace #section-id-1, #section-id-2, etc. with the actual Section IDs you noted down earlier.
5- Save your changes.
Important Note: Previewing Your Horizontal Scroll
Once the code is applied, the horizontal scrolling effect will only be visible on the live/published version of your website—not in Squarespace’s edit mode. This ensures you can easily edit and rearrange sections in the backend without disruption. The code is designed for both functionality and convenience!
Best Placement Options:
After Step 4 (JS Code Injection) – Helps users understand why they don’t see changes immediately.
In a Pro Tips callout box – Visually highlights this key detail.
In the conclusion – Reassures readers before they publish.
Why This Works:
Manages expectations – Prevents confusion when the edit mode shows no changes.
Highlights convenience – Positions your code as user-friendly (subtle sales pitch for your services).
Encourages trust – Shows you anticipate their needs.
Step 5: Test and Publish
Preview your website to ensure the horizontal scrolling works as expected.
Make any necessary adjustments to the CSS or JavaScript if needed.
Once you’re satisfied, publish your changes.
Why Choose SquareSpell.co.uk for Your Squarespace Needs?
At Squarespell.co.uk, we’re passionate about helping Squarespace users create stunning, functional websites without breaking the bank. Our step-by-step guides and custom code solutions are designed to empower you to take control of your website’s design.
By following this guide, you’ve learned how to create horizontal scrolling sections without relying on third-party plugins like SquareKicker or Ghost plugins. This not only saves you money but also gives you full control over your website’s functionality.
Ready to Elevate Your Squarespace Website?
If you found this guide helpful, explore more tutorials and resources on Squarespell.co.uk. Whether you’re looking for custom code snippets, design tips, or one-on-one support, we’re here to help you create a website that stands out.
Visit Squarespell.co.uk today and unlock the full potential of your Squarespace website!
