4 Popular Custom Code Examples for Squarespace

Squarespace is a robust platform with customization options that cater to diverse style and professional needs. Its best-in-class features adapt to a wide range of use cases, making it a go-to choice for many entrepreneurs and creatives like you. But when you encounter edge cases that can't be addressed by these built-in features, that's when adding a little bit of code magic becomes handy.

I’m Rache, and I founded Squarestylist, a creative resource library that enables you to weave design and code into websites that inspire awe and wonder. Below, I’ll share how to achieve four of the most sought-after website customizations with just a little bit of code. 

Before we dive in, it's best to refer to our previous blog post on how to add custom code to your Squarespace site. This will help you keep best practices in mind while adding this code, one snippet at a time. 

Note: This content was created by a member of Squarespace Circle and does not reflect an official recommendation by Squarespace. As the Squarespace product is frequently evolving, Squarespace code is subject to change at any time and Squarespace cannot guarantee the code examples below will function in perpetuity. Customer support teams are unable to solve issues related to custom code added to Squarespace websites. Some of the code below is added via Code Injection, which is only available on certain Squarespace plans.

1. Add a "Scroll to Top" button

The scroll-to-top feature is a handy addition to your Squarespace site, especially for longer pages. It provides an easy way for users to navigate back to the top of the page to reach the menu or navigation items. 

Here are the steps to add a branded and accessible scroll-to-top button. 

1. Scroll to the bottom of your page and edit your site footer.

2. Add an image to any part of your footer. This image will serve as your scroll-to-top button, so feel free to choose or create any image or graphic that matches your branding. Consider adding an arrow or the text “Scroll to Top” for clarity.

3. Set the alt text to "Scroll to Top" for accessibility.

4. Set the link to "#top" and make sure the "Open link in a new tab" toggle is turned off.

5. To add the functionality where the button only shows up when the page is scrolled, add the first snippet of code below to Pages > Website Tools > Code Injection > Footer.

6. To style your scroll-to-top button, you can add some CSS code to Page > Website Tools > Custom CSS.

Code: Step 5

<script>

document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});

</script>

Code: Step 6

html.fe-block.scroll-to-top a@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-topbody.is-scrolled .fe-block.scroll-to-top abody:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-topbody:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections
.fe-block.scroll-to-top {
right:2vw;
bottom:2vw;
width:100px;
height:100px;
}

2. Change header navigation color on one page only

Customizing the header navigation color for a specific page is a common request, often needed when a page has a unique background or color scheme. Before you apply any custom code, let's explore Squarespace's built-in features that are designed to cater to this requirement.

1. Click Edit Site Header and go to your Design tab.

2. Under Colors, you'll find style options, including Adaptive.

3. The Adaptive option makes your header adapt to the color theme of your first section, ensuring good contrast.

You may also try the Solid or Gradient options for a consistent header across all pages.

If these native options don't meet your needs, you may turn to custom code to have more control over the colors of your header and its elements:

1. Go to the specific page where you want to change the header color.

2. Click the Settings icon next to the page name.

3. In the Advanced tab, you'll find the page-specific code injection area.

4. Paste the provided code below, ensuring you include the opening and closing style tags.

Code

<style>
:root {
--headerbg: #F4BAB5;
--headerText:#12294C;
}
/
*Change Header Background Color */
@media (min-width: 800px) and (hover: hover), (min-width: 1025px) {
.header-border {
    background: var(--headerbg);
}
}
/*Change Color  Header Nav Links on Desktop */
.header-display-desktop nav.header-nav-list a {
    color: var(--headerText) !important;
}
/*Change Color Header Nav Elements on desktop */
.header-display-desktop a.user-accounts-text-link.header-nav-item {
color: var(--headerText) !important;
}
 .header-display-desktop .header-title-text a {
color: var(--headerText) !important;
}
 .header-display-desktop .header-actions-action.header-actions-action--social svg {
fill: var(--headerText) !important;
}
 .header-display-desktop .Cart-inner path {
fill: var(--headerText) !important;
stroke: var(--headerText) !important;
}
 .header-display-desktop span.sqs-cart-quantity {
color: var(--headerText) !important;
}
</style>

This code uses CSS variables for easy color customization. You can change the color codes for both background and text colors. 

When assigning these colors, always consider accessibility by ensuring sufficient contrast between the header elements' color and the header background color. The code above has been carefully written to affect only the desktop view, which is likely your intended target.

3. Hide site title on homepage

Sometimes, you might want to hide your header title or logo on a specific page, typically the homepage. This is useful when you have a prominent logo in the first section and want to avoid repetition.

Here's how to hide the site title on a specific page:

1. Select the page where you want to hide the title.

2. Click the Settings icon next to the page name.

3. Go to the Advanced tab.

4. Add the code below to the Page Header Code Injection area.

Code

<style>
.header-display-desktop .header-title {
    display: none;
}
</style>

4. Apply a custom cursor image

Adding a custom cursor can make your site unique, but it's important to implement it thoughtfully to maintain a good user experience. Here's how to add a custom cursor to your Squarespace site.

1. Prepare your cursor image.

• Keep it under 128 pixels in width or height (30 to 50 pixels is typically good).

• Use an SVG file if possible to avoid pixelation. A small PNG is also fine.

2. Upload your cursor image.

• Create a temporary page in the Not Linked section of your site.

• Add a text block and insert your cursor image as a linked file.

• Save and click the link to get the file path.

3. Add the custom CSS.

• Go to your Custom CSS panel.

• Paste the provided code below and insert your file path within the quotation marks.

Code

body:not(.sqs-edit-mode-active) {
  cursor:url(" "), auto;
}

By default, this code will only change the default cursor, reverting to the standard pointer cursor for links and buttons. If you want a custom cursor for hover states too, use the code below and upload a separate image for the hover state.

Code

body:not(.sqs-edit-mode-active) {
  a:hover, button:hover {
    cursor:url(""), pointer; 
  }
}

Custom cursors can add a unique touch to your website. However, use them cautiously to avoid disrupting the familiar navigation experience for your users.

Go beyond copy-paste

While it's convenient to simply copy and paste these code snippets, I always encourage understanding how they work. This knowledge is key for troubleshooting and making custom modifications to your Squarespace site.

If you are keen, check out my free CSS basics course for Squarespace users. It covers CSS fundamentals, common Squarespace code use cases, and where to find help. 

I hope this resource has inspired you to add thoughtful customizations to your site on your own. Happy coding!