How to Add Custom Code to Your Website

Coding can feel intimidating with its abstract concepts and rules. The process of building websites from scratch while debugging errors along the way overwhelms many entrepreneurs—it’s probably why you built your site on Squarespace. But there are easier ways to put a bit of code into action to take your website to the next level.

My name is Rache, and I'm a member of Circle, Squarespace's partner program for professional web designers. I started out as a website designer who wanted to push the envelope in my client projects. When I realized I could use code to make this possible, I founded Squarestylist, a creative resource library that helps people weave design and code into websites that inspire awe and wonder in a sea of sameness. Here are a few tips and ways to make your site more unique with custom code.

Why add custom code to your website?

Research shows that a visitor’s first impression of a website is related to its design 94% of the time, so it’s worth putting effort into crafting the look and feel of your own digital space.

Don’t get me wrong: Custom code isn’t a requirement on Squarespace. You can get seamless functionality out of the box. That said, there’s value in using coding as a tool to add site features or requirements you may have that aren’t already built in.

Custom code best practices

As a self-taught web designer and developer, I learned how to code one snippet at a time, solving my way through each problem or use case as they occur. Whenever I face an unfamiliar technical issue, I inch my way through online forums and groups then put my newfound knowledge into practice right away.

Repeating this process allowed me to determine a few good habits that made all the difference in my skill building.

1. Maximize built-in features

Explore the Squarespace editor and don’t hesitate to dig into every single toggle you find. The builder is more capable than you might think. Half the time it’s a matter of knowing where to look for what you need in the default settings; the other half is familiarizing yourself with its working parts to know what to type into your search bar.

2. Understand what you’re adding

Once you find a code snippet floating around online that’s useful for your website, don’t simply copy and paste it on your Custom CSS or Code Injections panel. Review it one line at a time to understand how it affects your site. Take note of keywords and patterns—what do you think they mean?

This is how I managed to become fluent in the language of browsers even without formal education: by picking it up the way a toddler does. Nurture your curiosity and color your experience with delight rather than dread. You’d be surprised how much you can absorb.

If you’re interested in trying out a more guided approach to learning code, you can access my free CSS basics course as a starting point.

3. Be mindful of quality

Of course, there is more to web design than matters of visual taste. You need to ask yourself the important questions down the line if you’re taking the DIY route:

• Does your code unintentionally affect other website elements?

• How does your site respond to changes in screen sizes and orientations?

• How does it show up in different browsers?

• Will the additional feature slow down the site?

• How does your customization affect accessibility?

Keeping these considerations in mind will make you careful about your code’s impact beyond the default website preview. We need to ensure above all that we’re delivering an engaging user experience at every level.

Code snippets to try

Your first foray into CSS doesn’t have to be complex. I remember starting out by adding small details here and there, gradually building on my code repository as I went along. 

Access the CSS panel where you can add custom code in your Squarespace account by clicking Website, Website Tools at the bottom of the sidebar, then Custom CSS. You can begin tweaking your site with a few of these snippets.

1. Set an accent font

You don’t have to lean into the usual italics to emphasize certain words or phrases in your website. This feature allows you to designate a display typeface as your accent font—one you can use sparingly to really grab people’s attention.

1. Assign the style of your Miscellaneous font, which will serve as your accent font. To do so, Go to Site Styles > Fonts > Miscellaneous. Choose the font family of your choice and adjust the font properties.

2. Add your line of code by heading to Website > Website Tools > Custom CSS. Copy and paste the code below. If there is existing code, be careful not to delete it. Simply paste the additional code at the next available line.

3. Add a text block to any section of your website with Heading 1, Heading 2 or Heading 3 elements. Select a word or group of words and assign the italic format by hitting the I button in the text panel pop-up. The accent font style will be applied to the italicized words.

CSS Code

Add to Website > Website Tools > Custom CSS

h1 em, h2 em, h3 em {
font-family:var( --meta-font-font-family);}

Watch Rache’s custom code presentation from Squarespace Circle Day

2. Add line decors

Thin lines as a visual motif can lend any minimalist site a touch of finesse. You may already make use of the built-in horizontal line block in the Squarespace editor. To add vertical lines, simply slip a few lines of code into the CSS panel.

1. Add a Blank Section. To make it easier to place elements, make the Fluid Engine grid visible by pressing G on your keyboard.

2. Click the Add Block button to the top left of the section and choose Shape Block.

3. Open the shape block settings by double-clicking the block.

4. Open the shape dropdown and choose the last shape option (Keystone).

5. Navigate to Website > Website Tools > Custom CSS. Copy and paste the code below into the last blank line in the panel.

6. After pasting the CSS, the keystone shape block turns into a vertical line. You can change its color by toggling on the Stroke option under the shape block settings and choosing a color from the color picker.

7. On mobile, the vertical line turns into a horizontal line. Adjust the placement of the block accordingly. This won’t affect the desktop view.

CSS Code

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"] {

&::before {

width: 1px;

content: ''; height: 100%; background-color: var(--shape-block-stroke-color); position: absolute;} svg {display: none !important;}.sqs-shape > * {stroke-width: 0 !important;}

}

@media screen and (max-width: 767px) {

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"]::before {

height:1px;

width: 100%;

}

}

3. Show image effects on hover

Dynamic movement can also add visual interest to your website layouts. Here is one example that can activate 3D image effects each time the cursor lands on a selected image. This is a perfect example of leveraging built-in features. You’re just using code to lessen the distraction and boost your website’s interactivity.

1. Add an image block or choose an existing one.

2. Under the image block settings, select Image Effects and choose an effect.

3. By default, the image effect will be visible upon load of the page. To make it show only upon hover interaction, head to Website > Website Tools > Custom CSS and paste the code below.

CSS Code

.sqs-block-image .design-layout-fluid .fluid-image-container {img {visibility: visible !important;}}.imageEffectContainer {opacity: 0;transition:0.5s;}.sqs-block-image:hover .imageEffectContainer {opacity: 1;}

I hope this piece encourages you to get past your comfort zone and experiment in the sandbox of your code editor, if you hadn’t already done so. Happy coding!

Ready to create and customize your website?