Creating Anchor Links in Squarespace
If you’ve been using Squarespace for very long, you know there are some things that aren’t obvious updates and changes. One of those is anchor links - the links you click on to send you to a certain part of a page.
I’ve had quite a few clients ask me to set these up for them, usually because they have long pages with a lot of information that people might not want to scroll through.
So what is an anchor link exactly? Unlike normal links that send you to another page or website, an anchor link “leapfrogs” you to a specific point on a page. In a time where people don’t have the attention span to read an entire page and stop scrolling way before they get to the end of an article, anchor links allow you to send them directly to the most important sections of your page.
Using an Anchor Link
There are a few ways that you might use anchor links to help visitors navigate your website more easily.
1. A Resources page with different sections
If you have a lot of different resources and you want to help visitors find the ones relevant to them, anchor links can direct them to a specific section of the page. See it in action here.
2. A long-form sales page with the “Buy” button at the end
While some people need to read your entire sales page to be ready to purchase, others might be ready from the start. You can use anchor links to send them directly to a “Buy Now” button, the FAQ section, or the application.
3. An online store with multiple options in each category
When your store has a lot of different types of products, people might not scroll through everything looking for exactly what they want, so anchor links will allow them to jump to the item they are interested in.
4. A recipe post where the printable version is getting lost
Food blogs make their living on sponsored content and having long posts boosts SEO, but not everyone will scroll through an entire post to get to your recipe, so you could test out anchor links to send them to the printable version and make the user experience easier.
Creating an Anchor Link in Squarespace
So now that you know how you might use an anchor link on your website, how do you create one in Squarespace? There are two different options depending on the template you’re using.
If you’re using an Index page
If you’re using an Index page for your design and want to add an anchor link, it’s pretty simple.
Start by making sure your Index page has more than one section.
2. Check the URL Slug of the section you want to link to. You can do this in the Pages menu by looking at the General Settings.
3. Then add a button or link in another section of the page. For the Clickthrough URL, use “#url-slug"
If you go into the Clickthrough URL settings, you would enter that same “url-slug” and make sure “Open in New Window” is not selected. This will be a Web Address, not a Page where you select from the list of pages on your Squarespace website.
4. Then just apply the button or link, save the changes, and test it to make sure it works correctly.
If you’re using a regular page or are on Squarespace 7.1
When you’re using an anchor link on a regular page or you’re designing in Squarespace 7.1, there aren’t built-in URL Slugs to use as reference points for your anchor links. Instead you’ll have to take a few extra steps.
Add a Code Block above the section you want to link to. Remove the pre-filled code and add in “<div id="section-name"></div>” The div id you choose will now be your URL Slug for this section.
2. Add a button or link in another section of the page. For the Clickthrough URL, use “#section-name"
If you go into the Clickthrough URL settings, you would enter that same “url-slug” and make sure “Open in New Window” is not selected. This will be a Web Address, not a Page where you select from the list of pages on your Squarespace website.
3. Apply the button or link, save the changes, and test it to make sure it works correctly.
Using anchor links is a great way to make navigating your website easier and more intuitive for visitors, improving the user experience and helping sort through a lot of information quickly. While you don’t want to use them on every page, they can be helpful when you have sections of content or long scrolling pages as a way to get people to where they want to go.
