Before we begin - if you already have a Squarespace website you can add a linktree easily, quickly and for free.

If you don’t have a website on Squarespace already I don’t recommend making a linktree in Squarespace - you can make one on your existing platform or use the linktree functionality available on many social media planning aps (Having said that if you don’t already have a website built on Squarespace maybe you should - get in touch and we can chat!)

#linkinbio… the work around we all use for the fact that we can’t put links on individual posts on Instagram. Whilst I can’t change Instagram (goodness me the things I’d change if I could!) I can show you how to create a simple, easy and FREE Instagram linktree alternative - also known as a links in bio landing page for your website. This post also includes a couple of CSS snippets that I use on every linktree or link in bio landing page I make.

So first - why have a linktree on your Squarespace website?

1. You can update your linktree to be relevant to your instagram post content.

As opposed to a homepage which will tend to stay relatively the same over the medium term, a linktree or an instagram links to website page can be updated with a direct link to your latest blog or a special offer if you posted about it.

2. It makes your calls to action very clear

Without all of the other bits and pieces you might have on a traditional web page, a linktree cuts out all the noise giving your visitors a clear path to your call(s) to action.

3. It drives traffic directly to your website

When you use a third party site for your linktree traffic is driven to them first. When you host an alternative linktree page on your own site visitors come directly to your site. Great for your stats, your analysis and your potential for conversion.

4. Its simple design is perfect for mobile traffic

Having a simple set of buttons in a column is great mobile phone UX (user experience), allowing visitors to easily navigate and select their choice just using their thumbs.

5. It’s free! If you have a Squarespace website already, it’s as simple as adding an extra page to your site & hey presto!

Sold?

Read on for a step by step guide on how to add your very own linktree aka Instagram link in bio landing page to your website, plus some top tips on ensuring its strategically designed.

Step by step guide to create your linktree alternative on Squarespace

Step 1 - Create a new unlinked page in Squarespace.

Create an unlinked page on Squarespace. Do this by navigating to the “Pages” area on the left hand menu. Then clicking on the “+” button in the “Not Linked” section. We are creating this page in the Not Linked section because of course we do not want it to show up in our navigation bar. This will be our linkinbio page or our linktree.

Call your new page something appropriate - perhaps links, hello, welcome or instagram. You can drag/ drop it below the other pages if you want.

Step 2 Create your squarespace Page Settings

Click on the gear icon on the right side of the page title in the left hand side menu. Here you can edit the page settings.

Because you have already named your linktree page the general fields will be pre-populated with whatever name you gave your page. We can add something a little more developed to the Page Title which will show up in the top of the browser window when someone is on our links page - for example “Instagram Links” or “Welcome to your business name” or whatever you fancy. Keep it simple and not too long.

Click save

step 3 Hide your linktree page from SEO search results - optional

You may wish to hide your linktree page from search results, as it could look a little out of context should it come up in a google search. If you’d like to do this remain on settings and click on “SEO”. It’s here that we want to select “Hide Page from Search Results”. Once this is toggled on, we know that our linktree page will not show up in a google search.

Click save

Step 4 - Build your custom linktree alternative

After we click save on our page settings we will select the linkinbio page (or whatever you named it) from our list of Not Linked Pages and click on the edit button on the top left to build out our page.

We build out our linktree page like any other page on Squarespace. We start by adding a section, and then I suggest we keep it really simple with just an image or logo and a maximum of 5 buttons.

We can use the Squarespace mobile view function to see how our linktree design looks on mobile as we create it. We use this all the time when we’re building a website on Squarespace to check that our design looks just as good on mobile as on desktop, and here it’s even more important as the vast majority of traffic from instagram is driven by mobile users. To do this all you need to do is click on the little mobile icon on the top right side of the screen and you will see what your linktree page looks like on mobile.

Pro Tip

If you have blog content you want to link to you can add a tag filter to your button meaning that your blog page will be automatically filtered by this. It’s a great tool if you have different themes of content (for example in my case - Squarespace tips vs. small business advice) meaning that people can get directly to the content that’s interesting for them. To do this simply connect a button to your blog, then choose a filter (by tag).

5. Use CSS to remove the Header and Footer of your webpage

Something I like to do on instagram links pages, but also on 404 Pages, Privacy Pages, Cookie Pages or Contact Forms is to remove the Header and Footer so as not to distract from the content or action on the page.

This is even more important on an linktree page as our calls to action (The “book now/ sign up now/ get in touch buttons) are what this page is all about and we don’t want anything to get in the way of these. Luckily to do this it’s pretty simple - we’re just adding a little bit of custom CSS to hide the header and footer into the page advanced settings. Here are the step by step instructions:

Navigate to the Page Settings by clicking the gear icon

Choose “Advanced”

Add the CSS below to remove the Header and Footer

Be careful to ensure the punctuation is exactly as shown - you can copy & paste the snippet below

<style>

.header, #footer-sections {display:none!important;}

</style>

Don’t forget to Click Save

Step 6 - Make all the buttons the same width with CSS

One small improvement we can make to the design of our linktree page is to add a little bit of custom CSS to make all of the buttons the same width. It just smartens up the look to have all the buttons the same width and makes our instagram links page look all the more slick. We add this CSS snippet in the same place as we added the CSS to hide header and footer.

Navigate to the Page Settings

Choose “Advanced”

Add this CSS to make the buttons the same width

<style>

.sqs-block-button-element {width: 200px}

</style>

Click Save

Note that the 200px width is totally changeable. Be mindful though - it’s also an absolute size so it won’t change based on the size of the screen meaning on some screens it will appear larger than on others. To have a size of button that is relative to the screen size (e.g. a % of the screen width) you can use a % value - this is especially good on mobiles - see below.

If you’d like the code only to apply on mobile devices (which is what I recommend) you can add this in front:

@media only screen and (max-width:767px)

In this case we use a % value for the button width rather than a pixel value. Again you can choose what percentage you’d like. I tend to go for 70%.

The CSS then becomes:

<style>

@media only screen and (max-width:767px) {.sqs-block-button-element {width: 70% !important}}

</style>

Pro Tip:

A little note on <style> tags.

The tag before (<style>) and after (<style/>) our CSS snippet in page code injections (the ones you add to the advanced settings of a page) tells Squarespace that what’s in between these tags is CSS “language”.

The reason we have to do this here is that we can actually add different code languages like javascript or html to this code injection in advanced page settings.

In the site wide CSS injection area within the Design section we do not need to add this style tag as we can only put CSS into this area.

If we have multiple CSS snippets we’re adding via the page code injection, for example in our linktree page we’re adding a snippet to remove the header and footer and a snippet to make the buttons the same width we can put all of this between our style tags. It would then look like this:

<style>

.header, #footer-sections {

Display:none!important;

}

@media only screen and (max-width:767px) {

.sqs-block-button-element {

width: 70% !important;

}}

</style>

Step 7 - Add your linktree to your instagram bio

Finally, now your page is built don’t forget to add the url to your instagram bio and get using it by flagging #linkinbio in your posts.

Remember it’s easy to update to connect your latest blog post, or special offer and you can even check out the traffic that you’re driving to it by looking at your website page stats in Squarespace or Google Analytics.

So there you have it - a quick instagram links page for free on your Squarespace website !!

Blog