Using Plug-In’s on Squarespace Websites

 

Not all templates are created equal!

Sometimes you want a function or styling option from another template (or something more custom) and if it's not included in your template, you can add code to create it. An easy way of adding code (or new functionality) to your website is with plug-ins.

 
Using plug-in's on Squarespace websites
 

Plug-ins (for Squarespace) are essentially packaged up code that has been written and tested for you. To add them (i.e. code) to your website, all you need to do is follow the developers instructions and, more often than not, that just means doing a bit of copying and pasting.

These plug-ins will be built around, or include, 1-3 types of code:

  1. HTML: The standard code language used.

  2. CSS: Code that changes how things look (the style and design) based on the HTML or javascript that you've added. i.e you add the HTML and then you can customize it using CSS. You could add a box to your website but the HTML doesn't know what size, colour or ratio that box is, so you use CSS to choose and control the styling.

  3. Java Script: A code language used to make more complicated actions happen. HTML typically creates static things (like boxes, text, images, etc.) but javascript allows you to make things happen and have a more interactive website with moving visuals.


Unlike the easier to access libraries in Shopify and Wordpress, Squarespace, itself, doesn’t create or have plug-ins. What it does have though is curious and determined designers and developers who create code and plug-ins that hack Squarepace a bit for their own uses!

By browsing Squarespace plug ins on Google you'll find a few sites that offer pug-in's specifically for Squarespace.

SQSPThemes and Square Studio are our go-to's, but here’s a more detailed breakdown of the Squarespace plug-ins we’ve found the most helpful from these sites.


SIDEBAR

Sidebar is a handy plug-in for anyone who wants a sidebar on Squarespace, but doesn’t want to use the blog specific templates.

courtesy of  SQSP Themes  // Sidebar

courtesy of SQSP Themes // Sidebar

 


For instance, Rally is our go-to because it’s the most functional template and gives you the most options, but it isn’t really setup for a lot of blog options.

The blog templates tend to be more restrictive, so you can’t have index pages for example, so if you want a middle ground, plug-ins like Sidebar are handy!


DISABLING RIGHT CLICK

Want to share your portfolio without putting watermarks all over it, but also don’t want anyone to be able to right click and save the images for their own (cheeky) use?

Then the Disabling Right Click plug-in is perfect for you because that’s exactly what it does!


TIMELINE

Looking for a way to add a great looking timeline to your website? This vertical, alternating timeline plug-in does just that and will help you display all of that important information about your product launch, business’ history, you name it in a clean and effective way.

courtesy of  Square Studios  // Timeline

courtesy of Square Studios // Timeline

 

BUTTONS

If you want more dynamic or stylized buttons on your site, something that really says “click me”, then there are LOTS of different plug-ins you can use for this.

Button Five is a great example of just how fancy your buttons can be, but search around SQSPThemes and Square Studio and you’ll find even more options.


COUNTERS

Counters are something you see a lot of in Wordpress themes. You know, those counters that keep track of how many clients a person has had, how many projects they’ve completed, or even how many cities they serve.

Yea those. And if you want one on your site all you need to do is find a plug-in like the Animated Counter that Square Studio’s has on offer.

It jumps into action as soon as someone scrolls to it, quickly rolling up the numbers to show just how many clients, projects, etc you’ve got in a way that grabs people’s attention.


USING AN ACCORDION TO HIDE TEXT

You know when you get to a FAQ section and you click on a subject/question and the answer text appears under it, moving everything else down a bit? That’s called an accordion and you can create achieve that same effect on your site with a plug-in.

This Classic Accordion is a great pic if that’s what you’re after, but again, you’ve got options.

You can even just find the code for this for free with a quick google search, but whatever you find will likely need some tweaking, so if you’re new to code your best bet is just going for a paid, pre-built plug-in.


PRODUCT COLOUR SWAP (Great for E-commerce!)

If you sell products online and any of those products has multiple variations, then a product colour swap plug-in would go a long way for to enhance your customer’s online shopping experience.

Something like the Change Colour With Variant plug-in from SQSPThemes works perfectly for this. You can select the colour or style variant from a drop down menu and when you click on it, the image automatically changes to match the product choice.

Easy as pie! Plus it helps your customers feel confident that they’re choosing exactly what they intended on choosing!


These are just a few plug-ins that we’ve found helpful over the years, but the world of plug-ins is expansive so, now that you know what they are and the possibilities they hold, we highly recommend you do your own exploring to see what new functionalities you can bring to your site!