January 18, 2020
By: Abigal Regucera

Top 3 EASY Squarespace Hacks

Web designer Abigail Regucera shares her top three easy hacks to implement on your Squarespace website with custom coding.

Amongst all the website builders out there, Squarespace is one of the top choices start-ups and small businesses choose to display themselves online. Squarespace is an easy to use website building platform loved by small (and big — even Pixar!!!) businesses around the world.

As a designer, I love working with Squarespace for my start-up clients. Not only am I able to create them something custom by coding over a pre-existing template. Startups can have a professional AND well-designed website without breaking the bank. Squarespace websites are easy to maintain and update because of their user-friendly content management system (CMS) which is crucial for a startup. Because as everyone knows, startups move fast, fast, fast!

Are you currently hosting your website on Squarespace? Want to add a little more spice and user friendly functions? Today, I am going to show you my top three EASY Squarespace hacks with custom coding. Don’t worry, if the thought of plugging in code is daunting to you! I have chosen my top three known hacks that anyone without a developer background can do. *Please note: you must either have a business or commerce Squarespace plan. A personal plan does not support additional CSS and JavaScript code.

Ready to learn something new today? Let’s dive in!

1. FAQ Accordion Dropdown

FAQ pages can get a bit lengthy. Improve your FAQ page’s user experience by simplifying it with this Squarespace design hack.

We will be using the Markdown Block and a JavaScript Code and just three simple steps.

STEP 1

Open up your FAQ page on Squarespace and add a code block with the JavaScript code below. This code will ensure that accordion drop down will open and close. 

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script>

$(document).ready(function(){
$(‘.markdown-block .sqs-block-content

h3′).css(‘cursor’,’pointer’);

$(“.markdown-block .sqs-block-content

h3″).nextUntil(“h3”).slideToggle();

$(“.markdown-block .sqs-block-content h3”).click(function()

{$(this).nextUntil(“h3”).slideToggle();});
});
</script>

STEP 2

Now it’s time to set up your questions and answers. Add a markdown block with the text below. (If you have more or less than 4 questions, paste more or delete one where applicable).

### + This is where your question goes
This is where your answer goes
### + This is where your question goes
This is where your answer goes
### + This is where your question goes
This is where your answer goes
### + This is where your question goes
This is where your answer goes

Let’s start inputting your frequently asked questions and their answers. For example:

### + This is where your question goes
This is where your answer goes
### + Do you accept returns and refunds?
We do not accept any returns and do not do refunds. All sales are final and are stated at check out.

The “+” adds some flair so the user knows it’s a drop down. You may also use “>” at the end of the question. *Please Note: Do not delete the “###” when you are adding some flair or else your accordion drop down will not work. “###” picks up your heading 3 styling from your design site styles.

STEP 3

Now click apply on your markdown block and click save on your page then VIOLA! You’re finito! *Please note: You will have to refresh your style editor or visit your web page as a public visitor to see your accordion dropdown. 

Now you have a spunky FAQ page and your Squarespace site is looking more custom and less template-y! And the great part about this code is that it is multi use for other pages of your Squarespace website! Any section in your layout that you want to be broken up, use this code.

2. Mobile Responsive Text

With everything being easy to access on your mobile device nowadays, it’s important that your website looks great on every screen. Squarespace already has built in mobile responsive-ness but it’s not 100%. It is possible to have a widow (a word hanging out on it’s own on one line of text) in mobile view. This code isn’t just for Squarespace, you can use it on wordpress or any other platform too!

We will be using the Custom CSS in the Design page of the Squarespace menu with just one simple step.

Your website mobile experience can go from this to this:

 STEP 1

On your Squarespace menu go to Design > Custom CSS

// MOBILE // < this is an indicator of what the below code is for. This will not break your code as long as you close it right

@media only screen and (max-width: 640px)
{
h1 {
font-size: 28px;
}
p {
font-size: 16px;
}
}

This could be any size of your choice. I would play around with it on the mobile editor view on Squarespace. Now your website is more mobile friendly!

3. Anchor links

Anchor links are a fun little ride down for your website user for a certain section you want to bring them to that is on the same page. Aka a smooth scrolling effect. Just two steps but bonus! I’m showing you two different ways you could use it, 1) on an index page (to my Squarespace 7.0 users) 2) on a blog post.

So I want guide my website visitors to this section of the page of my shop:

If you have set up this web page as an index page with pages nested underneath it on your Squarespace website, let me show you how to bring them to that certain section.

STEP 1

Hover over the page nested under your index and click on the gear icon.

From here, take note of your url slug that you used. In my case it is stickers.

STEP 2

Now highlight the text that you want to change into an anchor link and type in #YourUrlSlug so in my case it will be #stickers press apply and then save your changes and now enjoy a lil ride that section

Now on a blog post, it’s a little different and you actually have to plug in some code.

STEP 1

Go into your blog post and add a code block and type in the code below. So in my case, I want to bring this user to a certain category in my gift guide blog post. So in my code block I plugged in:

<h2 id=”home”> For those in love with their homes </h2>

I am using my heading 2 styling from my design site styles for this title on my blog post. But you are welcome to use <h1> for heading 1, <h3> for heading 3, or <p> for paragraph styles. The important part of this step is typing in your anchor link which is the id=”home”. *Please note: Refrain from making any spaces in the anchor link.

STEP 2

Now highlight the text that you want to anchor link. And type in /YourBlogName/BlogPostURL/#ID so in my case it will be /blog/ontario-local-and-small-businesses-gift-guide/#home

This is probably the most rewarding hack to learn because when I was in school we had a whole lesson learning about how to code JavaScript smooth scrolling. So the fact that you can easily do this through Squarespace is amazing to small businesses who don’t have the funds to hire a web developer!

I hope I was able to show you something cool today that you can add to your Squarespace website with ease. These are just some of the many Squarespace hacks that I love and it’s one of the reasons why I work on Squarespace vs. Wix. Happy coding!

← Return To The Blog