How to create a “Link in Bio” in Squarespace
In this video, I will show you how to create your very own Link in Bio page within your Squarespace website. You can fully customize this page to match your branding, fonts, plus you can even add images without needing to purchase a thing!
Setting up the page
Start by going to the back end of your Squarespace website and clicking on ‘Pages’, scroll down until you see the ‘Not Linked’ section, click on the plus icon and create a blank page.
Now you’ve created a new page title it: Link In Bio. After naming your page, click on the gear icon right next to the Page Title and here it is very important to fill in the following settings for SEO.
Page Title
URL Slug
Squarespace automatically fills these details in, but with the URL Slug you will want to make it more enticing, such as ‘/click-here’ or ‘/click-me’.
Creating your Link In Bio page
Now you can start editing the page.
I like to start with spacers as it helps define the structure of the whole page. I add 3 spacers next to each other and remove the text at the bottom.
Under the middle spacer you can insert anything you like to start this page with, such as:
An image of yourself
Your business logo
Text
Buttons
OPTIONAL
Follow the instructions below in order to make the buttons the same size/length and to hide the header (primary navigation), footer, announcement bar and optimize this all for mobile as well with CSS.
Before we start:
Download the Squarespace Collection/Block Identifier extension to Chrome. This extension will make it so much easier for you to find the Collection (page) and block IDs on your Squarespace website so that you don’t have to dig through the source code to find them. After installing this, all you will need to do is click on the ID buttons to copy the ID to your clipboard.
Step #1: After installing the Squarespace Collection/Block Identifier extension, you will see a black icon with a white B on the right hand corner of your screen (see in red). To get the collection number you will click on that icon once while on your Squarespace site page and you will see a bunch of collection numbers.
Step #2: click on the collection number on the top left hand corner of your screen (see in yellow) to copy to your clipboard. This is the block ID you will need in order to make the changes.
Step #3: Once you have that collection number copied to your clipboard, you will proceed to go to Design> Custom CSS> and in the white area you will paste the following:
To hide your header, footer, announcement bar, and most importantly hide it on mobile:
add your collection number here {
header, footer, .sqs-announcement-bar-dropzone, .Mobile {
display: none !important;
}
}
To make the buttons the same length:
Tip: You can play with the percentage here
add your collection number here { .sqs-block-button-element { width: 80% !important; } }
Here’s how my Link in Bio page is designed
Final Steps
Don’t forget to press save!
Add the link to your Instagram bio.
Pin this blog for later👇
