From background patterns to fun with fonts, from animated gradients to getting that little scroll indicator in the Brine family of templates to bounce, these custom CSS tricks and other code hacks for Squarespace will help you design a better Squarespace website.

You can see some of the resources contained in these articles in action on the Marksmen Studio website. Or view the websites featured in the articles.

All but one of these hacks work in every Squarespace template.

None of these code examples needs to be added to Squarespace Code Injection. All can be added simply and easily to your site in Squarespace’s Home Editor in Design > Custom CSS, or on a specific page in page header code injection in Settings > Advanced.


 

Squarespace Code mini guide

Code, including plugins, can be added to Squarespace in three different locations. It's important to enter it properly in the right place. This mini guide tells you how to add code to Squarespace with useful examples that really work.

Custom CSS

CSS, which stands for Cascading Style Sheets, usually affects the appearance of your site. This includes alterations to fonts and colors, as well as positioning of blocks and other elements on the site. If you want an entire Squarespace site to be affected by specific CSS, you should enter it directly in the Home Menu in Design > Custom CSS.

Example:

Prevent hyphenation in all headings on a Squarespace website.

h1, h2, h3, h4 {-webkit-hyphens: manual !important;-moz-hyphens: manual !important;-ms-hyphens: manual !important; hyphens: manual !important;}

Code Injection

Code (except CSS) that applies to the entire site is added in the Home Menu in Settings > Advanced > Code Injection. This includes many of the scripts commonly added to Squarespace sites, including Google Tag Manager or Analytics scripts, a variety of verification codes (Google, Bing) or other third-party code such as for reviews. You can also manually enter more complete Organization or Local Business schema markup than Squarespace provides.

Example:

Add jQuery (a Javascript library) to a Squarespace website.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Page Header Code Injection

Sometimes code, including CSS, is best applied to a single page, not the entire site. Such code should be added in page header code injection on the individual page under Pages in Squarespace.

If the code is a script, it should be surrounded by <script> tags. If it is CSS, it must be surrounded by <style> tags.

Example (CSS):

Change font for H3 headings on a single Squarespace index page section.

<style> #custom-squarespace-websites h3 {font-family: semplicita-pro}</style>

Example (Script):

Change breadcrumbs in Google search results for Squarespace products.

<script>
  $(function(){
    $(".ProductItem-nav-breadcrumb-link:first-child").attr("href", "/squarespace-seo/");
});
</script>