Squarespace Tips

Squarespace 101: How to inject custom code

Being an active member on squarespace forum, I’ve been asked a lot questions about some simple customization, most of them can be solved by inject custom css or javascript, here is how to do

Add Custom Css to the site

  • Navigate to Settings Page
    Usually your
  • Click for item Design, then select Custom Css
  • Paste the code to Custom css textarea
    Tips: Paste it in the end of the box
  • Press Save

Add Custom snippet to Single page

  • Navigate to Settings Page
    Usually your
  • Select Pages item, where you manage ste’s pages
  • Hover over the name of the page name, click on gear icon
    There will be a popup show up, click on Advanced
  • Paste the code snippet to end of the Page Header Code Injection

Add Custom snippet side-wide

  • Navigate to Settings Page
    Sed do eiusmod ut tempor incididunt ut labore et dolore.
  • Click Advanced, then Code Injection
  • There 2 boxes, HEADER and FOOTER
    Paste the snippet in one of them, based on the instruction, usually on Footer

Find the fixed element id with Chrome Extension

Sometime you just wanna apply the code to one block only, what is when this plugin useful

Find this plugin on Chrome Extension and Install it
Squarespace ID Finder – Chrome Web Store (

  • Once install, visit your website
  • Look for the extension icon on the top right of browser
  • Click on the icon, there will be some text show up above your blocks
  • Click on them to copy to clipboard and follow answers instruction