All Episodes

April 18, 2024 14 mins

Send a message to InsidetheSquare

In this episode of ThinkInsideTheSquare, we're "cracking the code" on the essential languages that shape your Squarespace site: CSS and JavaScript. I'll be unraveling why these languages are key to understanding the functionality and aesthetics of your website. We'll explore why customizing with CSS is my go-to and share a personal tale of JavaScript gone wrong to caution you on its complexities. Plus, I'll provide insider info on reliable JavaScript developers for Squarespace and offer a special guide filled with must-use CSS codes. Get ready to transform your Squarespace website from good to exceptional!

Important Links

📝 Full show notes: https://insidethesquare.co/podcast/38

🎧 Past episodes: https://insidethesquare.co/podcast

💌 Join my email list: https://insidethesquare.co/email 

Support the show

The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc.

For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquare.co/podcast

Mark as Played
Transcript

Episode Transcript

Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:10):
Every Squarespace website relies on two code
languages to define how it looksand how it works.
In this episode of Think Insidethe Square, we'll be talking
about those languages CSS andJavaScript to explain why you
need to know about both and whyI focus only on customizing with
CSS after two JavaScriptdisasters that I want to help

(00:31):
you avoid.
Welcome to Think Inside theSquare, a podcast full of tips
and tricks to help you create aSquarespace website that you're
proud of.
I'm your host, becca Harpene,squarespace expert and creator
of InsideTheSquareco.
In this episode, we're crackingthe code.
Okay, I had to start with a pun.
There was no stopping that.
What we're going to be talkingabout is CSS and JavaScript, two

(00:52):
code languages that can helpenhance Squarespace.
I'll explain how they work andwhy I add custom CSS to every
single Squarespace website Icreate.
For a transcript of thisepisode, along with the links to
any resources mentioned, visitinsidethesquareco forward slash
podcast.
The term Squarespace is atrademark of Squarespace
Incorporated.
This content is not affiliatedwith Squarespace Incorporated.

(01:14):
Every Squarespace websiterelies on two code languages to
define its appearance and itsfunctionality.
These two languages that we'llfocus on in this episode are
JavaScript and CSS, which standsfor Cascading Style Sheet.
Understanding their roles canunlock a whole new level of
website customization optionsfor you.
So let's delve a little deeperand explore how each code

(01:37):
language contributes to themagic that is your Squarespace
website.
Css is a crucial part of everySquarespace website.
Css is a crucial part of everySquarespace website.
It tells a computer browser howto style the content of your
site what fonts to use, whatcolors things should be, the
spacing between differentelements these are all brought
to life by CSS code.
Squarespace writes CSS for youbased on the design settings

(02:00):
that you picked Everything fromyour font menu and your color
themes, the specific layouts fora page section.
Squarespace translates thosedesign choices into the
appropriate CSS code behind thescenes.
This is why Squarespace canbrag about being a no-code
program.
You don't need to know code touse it, but trust me, it helps.

(02:22):
We will get into that here in aminute.
First, I want to talk about theother important code language
found inside SquarespaceJavaScript.
While CSS focuses on visualpresentation, javascript injects
a dose of interactivity thatbrings your website to life.
Features like slideshows,pop-up forms, your mobile menu

(02:42):
these are all powered byJavaScript.
Shows, pop-up forms, yourmobile menu these are all
powered by JavaScript.
Squarespace utilizes JavaScriptstrategically to create this
smooth user experience on yourwebsite.
For instance, think about theway your navigation bar
collapses on mobile devices, orhow a lightbox image appears
when you click on the image.
These are examples ofJavaScript functionality that

(03:03):
seamlessly integrated into yourSquarespace website without you
having to code a thing.
In essence, javascript is likethe engine that powers those
interactive elements of yourwebsite, while CSS is the
stylist, ensuring thateverything looks visually
appealing.
The short version, css is howit looks, javascript is how it
works.

(03:24):
Okay, now that you get thegeneral concept, I want to talk
about the world of JavaScriptplugins and explore why, while
tempting, they might not alwaysbe the best fit for a
Squarespace website.
While JavaScript offersexciting possibilities for
interactivity, it's reallyimportant to understand these
downsides, especially whenthinking about installing

(03:46):
third-party JavaScript pluginsfor your Squarespace website,
something that Squarespacedidn't make.
It's made by someone else.
Here are three reasons why Ithink you should be a little bit
cautious before you consideradding a JavaScript plugin to
your Squarespace website.
Squarespace itself is a finelytuned platform that's designed

(04:06):
to work in a specific way, andif you introduce a JavaScript
plugin that creates a functionSquarespace isn't built to
handle, it can disrupt anotherfunction that's already there.
This will come about in theform of unexpected glitches or
malfunctions.
Imagine you have a gorgeousslideshow that you've
meticulously crafted, but itturns out that the way that

(04:27):
slideshow functions is built offof a JavaScript code that also
changes something in your store.
And maybe you added a pluginfor a slideshow in your store
and all of a sudden you brokethe slideshow on another page.
That can happen when you add aJavaScript plugin that wasn't
created by Squarespace.
You add a plugin from anexternal developer and it might

(04:47):
break something that's alreadythere.
Another potential issue is theexternal server problem.
Stick with me on this one.
Some JavaScript codes areclient side JavaScript.
When you visit a web page thatcontains client side JavaScript
code, your web browser downloadsthat JavaScript code along with
the rest of your site, the HTMLand the CSS files that make up

(05:09):
the whole page.
Once all that is downloaded,the browser will then execute
that JavaScript code locally onyour computer or device.
For complicated tasks thatcan't be time-consuming.
So many JavaScript plugins relyon external servers to function
.
This means that when a visitorinteracts with your website

(05:29):
element powered by that plugin,their device functions first
needs to communicate with theplugin server and then back to
your Squarespace site.
This extra step can also createlag, especially if the plugin
server is overloaded or evengeographically distant, and in
today's fast-paced online world,even a slight delay in your
website loading or functioningcan negatively impact your

(05:51):
visitors' experience andpotentially lead them to jump
out of your website before theyeven see your amazing content.
Then there's the update dilemma.
Squarespace is constantlyevolving, rolling out new
features and functionalities tokeep its platform at the
forefront of website design, andunfortunately, this kind of
forward momentum can sometimesleave JavaScript plugins behind.

(06:14):
If a plugin relies on aspecific aspect of Squarespace
code that gets updated, theplugin might cease to function
altogether.
This can leave you scramblingto find a replacement or face
the prospect of a broken websiteelement a very frustrating
situation that I want to helpyou avoid.
This happened to me not once,but twice, and the second time

(06:36):
was one high-ticket clientwebsite of mine.
It was so stressful and it tookme days to update.
I ended up having to create myown JavaScript plugin to fix the
problem, and that client didnot renew their contract with me
, but I honestly, I wasn'tsurprised in the slightest.
That being said, you don't haveto swear off JavaScript entirely

(06:56):
.
I get it.
Sometimes there is just onecool feature that Squarespace is
missing and you need just alittle bit of code to make your
website perfect for yourspecific needs.
And if you run into thatsituation, there are two
established JavaScriptdevelopers that I trust, that I
recommend SQSP themes and Squarewebsites.

(07:17):
I trust both of thesedevelopers because they have a
proven track record of creatinghigh quality plugins that are
regularly updated.
So when Squarespace makes achange, they are on it.
You might experience like aslight delay as they adapt their
plugins to new Squarespaceupdates, but you can be
confident that their solutionsare built with compatibility and

(07:37):
functionality in mind.
And again, I'm here to vouchfor them.
I've used both SQSP themes andSquare websites for years and I
will continue to recommend themfor specific functions that
Squarespace isn't capable of.
I'll link to both of their mainwebsites in the show notes for
this episode atinsidethesquareco forward slash
podcast.
Again, that's SQSP themes andSquare websites.

(08:01):
To be clear, this isn't thecompany Square creating website
plugins.
This is literally Squarewebsites is the name of this
business that I've gottenJavaScript plugins from before
that I truly trust.
With all of that info in mind,I do have to say that I've only
used JavaScript plugins on about10% of my website projects over
the last decade, but I haveadded custom CSS to every single

(08:24):
Squarespace website I'vecreated.
100% of my projects have hadcustom CSS added.
Javascript is how it works.
Css is how it looks.
I try to rely on the corefeatures already available in
Squarespace, including thedesign options, and then I'll
sprinkle in some custom CSS tomake every website I build truly

(08:46):
unique.
To be super duper clear here youdon't have to use CSS to make a
Squarespace website look good.
I only use CSS to do somethingthe design menu can't do.
For a lot of basic Squarespacewebsites, you don't need it.
The font menu and color themeswe've got a lot of options to
work with.
But when someone hires me tocreate a Squarespace website for

(09:08):
them, they don't want someonewho will replace stock photos
with their own images andreplace filler text with the
text provided Anyone can do that.
That's copy and paste, that'sclick and you're done.
When someone pays me to buildthem a website, it's because
they want something better thangood.
They want a site that isn't anupdated template.
They want me to translate theirbrand into a curated and unique

(09:30):
online experience.
There is no way that I wouldever sell a website to someone
that wasn't at least a littlebit customized to what they need
.
The developers at Squarespacethey know this.
They have given us the abilityto add custom code to the main
CSS file that was created basedon our design choices.
Not every website builder letsyou do this, and I am so

(09:52):
grateful that Squarespace doeslets you do this, and I am so
grateful that Squarespace does.
Squarespace templates provide asolid foundation, but it's CSS
that unlocks the true potentialfor creating a website that's
one of a kind.
By tweaking fonts, colors,layouts and even adding subtle
animations with custom CSS, youcan transform a template into a
website that reflects a veryunique style and personality,
into a website that reflects avery unique style and

(10:14):
personality.
The beauty of CSS is that it'shonestly easy to create.
At its core, a CSS code is astatement of three specific
things translated into alanguage that the computer
browser will understand.
All CSS codes will say is thisis the content I want to change.
This is the part of the contentthat I want to change and this

(10:36):
is what I'm changing it to.
That's three things.
If you want a specific buttonto be blue.
You would say this is thebutton.
Take its background, make itblue.
That's literally it, and that'swhy it was so easy for me, a
college dropout working odd jobslike at a tattoo shop and a gas
station, to learn to write myown custom code.
I started making small tweakslike adjusting font sizes or

(10:59):
customizing button styles on ahover Simple codes that I still
use to this day.
If you want to give this a try,I have some resources to help
because, honestly, it's easy andI can walk you through it.
I'm confident you can use customcode on Squarespace.
Check out the show notes forthis episode at
insidethesquareco forward slashpodcast.
But if you really want to hitthe ground running, you're in

(11:21):
for a treat.
I collected the five codes thatI've noticed myself use over
and over again, the five customcodes I use on every Squarespace
website I create, and I putthem all into a PDF for you
insidethesqu.
Squareco forward slash five.
That's the number five spelledout F-I-V-E.
Here's a little sneak peek ofwhat's in that PDF.

(11:41):
These five codes will help youcustomize your main menu,
including your dropdown.
You'll also get a code tocustomize the super generic and
boring cookie alert.
Add a hover effect to a formbutton and create a custom
landing page.
Again, you can get a copy ofthese codes and tips on how to
use them and make them uniquelyyours at insidethesquareco

(12:02):
forward slash five.
I am definitely a fan of customCSS and I want to teach any and
every Squarespace-er out therejust how awesome it is to use,
but I will save that rant foranother episode.
We covered a lot today, so let'sdo a quick recap.
In today's information-packedepisode, we explored the
fascinating world of code andhow it shapes your Squarespace

(12:24):
website.
We delved into the roles ofJavaScript and CSS, uncovering
their unique strengths andconsiderations.
Javascript is a powerful codelanguage that injects
interactivity into websites.
Think animations, pop-up forms,fancy slideshows, your mobile
menu.

(12:44):
However, javascript plugins forSquarespace can be a
double-edged sword.
While they offer excitingfunctionality, they can also
disrupt Squarespace's internalworkings.
They can introduce LAN fromexternal servers and potentially
break, if Squarespace updates,its code database.
However, squarespace can't doeverything that we need it to do
, so when you do have to add alittle bit of JavaScript, I have
two developers that Ipersonally recommend and I'll

(13:07):
link to them in the show notesat insidethesquareco forward
slash podcast, the other codelanguage we talked about today
was CSS, cascading Style Sheet.
It's the language that controlsthe visual appearance of your
site.
Css is the style of your sitewhat fonts are there, what color
things should be, what paddingneeds to be associated with what
button?
Every choice you make in thedesign menus built into

(13:30):
Squarespace are translated toCSS behind the scenes, but we as
Squarespace-ers can add customCSS to customize our websites
even more.
Squarespace offers a fantasticfoundation, but CSS empowers you
to truly make it your own.
So if you're ready to take yourwebsite from good to great,
start with the five codes I addto every Squarespace website

(13:52):
that I create.
I put them all in a free guidesprinkled with some pro tips
that I picked up over the.
Them all in a free guidesprinkled with some pro tips
that I picked up over the lastdecade as a self-taught designer
.
There's a link in the shownotes or you can head on over to
insidethesquareco forward slashfive.
Thank you so much for listeningto this episode of Think Inside
the Square.
I definitely talk a little bitfaster when I'm excited to share
some of my code secrets withyou, so I appreciate you going

(14:14):
all the way to the end of thisepisode.
I hope you're inspired andexcited about the potential of
your Squarespace website.
Squarespace is my platform ofchoice and I love sharing ideas
and information on how to makethe most out of it.
If you enjoyed this episode andwant to learn more about how to
make Squarespace uniquely yours, be sure to subscribe to this
podcast, wherever you happen tobe listening to this episode.

(14:35):
Thanks again for joining me and, most importantly, have fun
with your Squarespace website.
Bye for now.
Advertise With Us

Popular Podcasts

Stuff You Should Know
The Joe Rogan Experience

The Joe Rogan Experience

The official podcast of comedian Joe Rogan.

24/7 News: The Latest

24/7 News: The Latest

The latest news in 4 minutes updated every hour, every day.

Music, radio and podcasts, all free. Listen online or download the iHeart App.

Connect

© 2025 iHeartMedia, Inc.