FREE SNIPPET LIBRARY
10 Copy-and-Paste Code Snippets
Every Squarespace Designer Should Know
Welcome to your free code snippet library.
Below, you’ll find a collection of ten simple yet impactful code snippets that you can easily add to your Squarespace projects. Whether you’re a beginner or a seasoned designer, these code snippets are designed to save you time, add polish, and give your sites that extra wow factor your clients will love. Let’s dive in and start transforming your designs!
1
Fixed Background
Create a dynamic look by locking your background image in place while the content scrolls.
/* Fixed Background */
SECTIONID .section-border {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
-webkit-clip-path: inset(0px);
}
SECTIONID .section-background {
position: fixed;
top: 0;
height: 100vh;
}Pin a Section
Make a section stay “pinned” to the top of the screen temporarily for emphasis during scroll.
2
/* Pin a Section */
SECTIONID {
position: sticky !important;
overflow: visible !important;
top: 0;
}
Back to Top Button
Add a handy button that smoothly scrolls users back to the top of the page.
HTML (Header Code Injection)
3
<!-- Scroll to Top Button --> <button onclick="scrollToTop()" id="scroll-button">↑</button>
Javascript (Footer Code Injection)
<!-- Scroll to Top Button -->
<script>
scrollButton = document.getElementById("scroll-button");
window.onscroll = function() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
scrollButton.style.display = "block";
} else {
scrollButton.style.display = "none";
}
}
function scrollToTop() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>CSS
/* Scroll to Top Button */
html {
scroll-behavior: smooth;
}
#scroll-button {
display: none;
position: fixed;
z-index: 9999;
width: 70px;
height: 70px;
bottom: 3vw;
right: 3vw;
background: black; // button color
color: white; // font color
border-radius: 50%; // round shape
border: none;
font-size: 1.4rem; // font size
}Change Font Size on Mobile
Automatically adjust font sizes to improve readability on smaller screens.
4
/* Font Size on Mobile */
@media only screen and (max-width: 640px) {
h1 {
font-size: 2rem; //heading 1
}
h2 {
font-size: 1.6rem; //heading 2
}
h3 {
font-size: 1.4rem; //heading 3
}
h4 {
font-size: 1.2rem; //heading 4
}
.sqsrte-large {
font-size: 1.2rem; //paragraph 1
}
p {
font-size: 1rem; //paragraph 2
}
.sqsrte-small {
font-size: 0.8rem; //paragraph 3
}
}Add a Custom Font
Bring your brand to life by using any font beyond the default options.
5
/*Import Custom Font */
@font-face {
font-family: 'NAME';
src: url(LINK);
}
/*Add to Site Title*/
#site-title {
font-family: 'NAME' !important;
}
/*Add to Headings or Body Text*/
h1 {
font-family: 'NAME' !important;
}Add an Outline or Shadow to Text
Make your headlines and text stand out with a soft shadow or defined outline — perfect for layered images or bold design moments.
Click here for a shadow code generator.
6
/* Outline Text */
#BLOCKID h1{
color: transparent;
-webkit-text-stroke: 1px black;
}
/* Shadow on Text */
#BLOCKID h1{
text-shadow: 2px 2px 5px rgba(0,0,0,0.5); // offset x, offset y, blur radius, color
}Add a Shadow to Buttons
Give buttons depth and a subtle 3D effect with shadow styling.
Click here for a shadow code generator.
7
/* Button Blocks */
.sqs-block-button-element {
// SHADOW CODE HERE
}
/*Button in Header */
.header-actions-action--cta a {
// SHADOW CODE HERE
}
/* Newsletter Button */
.newsletter-form-button {
// SHADOW CODE HERE
}Hover Effect on Buttons
Enhance button interactivity with smooth visual changes on hover.
8
/* Button Grows on Hover */
.sqs-block-button-element {
transition: 0.5s !important;
transform: scale(1);
}
.sqs-block-button-element:hover {
transform: scale(1.1);
opacity: 1 !important;
}
/* Button Fills with Color on Hover */
.sqs-block-button-element {
transition: all 0.2s ease-in;
background: rgba(0, 0, 0, 0) !important;
outline: 1px solid var(--primaryButtonTextColor);
}
.sqs-block-button-element:hover {
background: var(--primaryButtonBackgroundColor) !important;
outline: none;
}
/* Button Transparent on Hover */
.sqs-block-button-element {
transition: all 0.2s ease-in;
outline: none;
}
.sqs-block-button-element:hover {
background: rgba(0, 0, 0, 0) !important;
outline: 1px solid var(--primaryButtonTextColor);
}
Image Overlap Effect
Create stylish overlapping images that break section boundaries for impact.
9
/* Move an Image Up */
#BLOCKID {
position: relative;
top: -5vw;
}
/* Move an Image Down */
#BLOCKID {
position: relative;
bottom: -5vw;
}Spinning Image Effect
Add playful animation with an image that continuously spins in place.
10
#block-2f9acc1eca6d74347771 {
animation: rotation 5s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}PLACE INFORMATION ABOUT CODING COURSE HERE AND HAVE A WAITLIST SIGN UP