How to create a "Link in bio" page in Squarespace

 
 
How to create a link in bio page in squarespace.jpg
 
 
 

Heads up! This page contains affiliate links (including Squarespace affiliate links). If you buy something through one of those links, you won’t pay a penny more, but we’ll earn a small commission. We’ll never promote something that we don’t 100% believe in and use ourselves. Thank you for your support!

I think it’s pretty obvious I love Squarespace. If you’re curious to see what all the hype is about, use code PARTNER10 at checkout to receive 10% your first year of any Squarespace plan.


Prefer to watch a video?

 
 

It’s time for another Squarespace tutorial!

A few weeks ago, I was tweaking my Instagram landing page on my site, and I thought it would be a great idea to show you how I did it! 

I love that I created this page on my Squarespace site instead of having to use ANOTHER software like linktr.ee or lnk.bio. 

Cause I don’t know about you but the more I can consolidate the tools and softwares I use in my business, the happier I am! 

This page is a cinch to create, super easy to customize to your brand, and a breeze to update when you have new links you want to showcase. Win-win-win!

So let’s jump right in!



Step 1: Create a new page in the “Not Linked” section of your pages menu

From the main Squarespace menu, click Pages, then scroll down to the “Not Linked” section. Click the plus sign and create a blank page. It will then create the page and title it “New Page.” You can edit the name of the page by double clicking the title. I would name it something like “Instagram” or “Instagram landing page”

Screen Shot 2019-08-14 at 12.19.21 PM.png


Step 2: Add content to your page

Then you want to move your mouse over to the right side of the page in the editing window and click on Edit next to “Page Content.” This will allow us to add the content. 

Screen Shot 2019-08-14 at 12.25.16 PM.png


It will always add a text box by default. Click insert point on the top-left corner of the text box and add a spacer block. On top of the spacer block you just added, click the insert point again and add another spacer block. Then drag the two spacer blocks next to each other. 

Then in your text box, enter any copy you would like greeting your visitor once they’ve landed on the page. 

Under the text box, add a button. In the button window that pops up, enter what you want the button to say in the “Text” box. 

In the “Clickthrough URL” box, enter where you would like the button to link to. If it’s an external link (ie. a page not on your own website), then just type in the URL of where you would like it to go. If you want it to go to a page on your own site, click the gear icon in the “Clickthrough URL” window and then click Page on the far left. Click on the search bar, and it will pull up a list of all the pages on your site. Select the page you would like the button to link to. Click Save.

You can adjust the size of your button but I would recommend leaving it as “Medium.” And leave it “Center” aligned. 

Then repeat the same process over again for as many buttons as you want on your page, though I would recommend no more than 5. We don’t want to overwhelm your visitors with too many options! #analysisparalysis

Once you’ve added all your content to your page, click Save.

This is roughly what your page should look like at this point…

Screen Shot 2019-08-14 at 12.31.32 PM.png



  • TIP: If you would like to add a colored background to your page, you can create one in Canva and upload it as a banner image by clicking the gear icon next to your page in the Pages menu, clicking Media, then uploading your banner/thumbnail image.

  • TIP: Remember your buttons will take on the styling of the rest of the buttons on your site. If you would like to edit the look of your buttons, head to Site Styles. But remember, whatever you change there will be universal throughout your entire site. 


Step 3: Edit the URL slug of your page

In the Pages menu on your left, click on the gear icon next to your new Instagram page to open the page settings. 

In the “URL slug” box, type in what you want the URL slug to be. I would suggest something simple like /Instagram or something catchier like /click-me.

*TIP: The exact link to your page will be www.yourwebsitedomain.com/URL slug
Example: My instagram landing page is www.wellnesssiteshop.com/click-me.



Step 4 (Optional): Customize using CSS

*This code is written for the Brine family templates. No guarantees it will work if you use a different template. 

This step is completely optional but I chose to do it because I think it makes the page look a little cleaner…

If you notice when you add your buttons, they might all be different lengths depending on how long your button text is. 

 
Screen Shot 2019-08-14 at 1.19.14 PM.png
 

If you would like to make them all the same length regardless of the text, you can add a bit of CSS by going to the main menu and clicking Design>Custom CSS. 

The first step is to get the ID for your specific Instagram landing page so the piece of code only affects the buttons on the one page and not your whole site. 

The easiest way to do this is to download the Chrome extension “Squarespace collection/block identifier” from the Chrome web store. 

Screen Shot 2019-08-14 at 1.21.30 PM.png


Once you install it on your browser, you will see a little black icon with a “B” on your extension toolbar. 

Screen Shot 2019-08-14 at 1.23.09 PM.png


Once you have the extension installed, go back to your Instagram page inside Squarespace and click on the extension icon. It will pull up a bunch of random numbers and letters, but don’t worry! All you have to do is click on the string of numbers in the top left corner of the page. It will say something like “#collection-a long string of numbers and letters”. This will copy it for you so you can paste it in the CSS window in just a second. 

To get rid of all the boxes, just hit the black extension icon one more time and they all should disappear. 

Screen Shot 2019-08-14 at 3.21.20 PM.png


Now go back to the main menu and go to Design>Custom CSS

In the box on the left, paste your collection ID that you just copied. Then right under your collection ID, paste the following code:


{ .sqs-block-button-element { width: 30% !important; } }

Screen Shot 2019-08-14 at 3.46.27 PM.png

Voila! You should see all your buttons become the same size. 

You can adjust the percentage in the code depending on how long you want your buttons. 

 

Step 5: Add your link to your IG profile

Now it’s time to connect your new page to your Insta profile! 

Just click on your profile, click Edit Profile, and type in the full URL of your Instagram landing page. 

 
 
IMG_4243.PNG
 

And that’s it! Easy right?!

Any questions? Drop them in the comments below 👇🏼

 

you’ll also love…

 
 
How to create a link in bio page in squarespace*.jpg
 
How to create a link in bio page in squarespace**.jpg