A Linktree Alternative for Squarespace Users

A Linktree Alternative for Squarespace Users

Why not just use Linktree?

I tried out Linktree for my Instagram account and it was so ugly. You can upgrade to the paid account and make styling changes, but I’m frugal. I can’t justify shelling out $6 a month for something I could do myself (or, rather, I can now justify one extra coffee shop latte per month). So I figured out how to make my own alternative to Linktree and I’ll share those steps with you here.

mobile screenshot

Why is the Squarespace alternative better?

I can think of a couple of reasons. First, if you create your own “link tree,” the sky is the limit with styling. You can make it look however you want. Just as importantly, you stay in control of your viewers. Rather than sending traffic from your Instagram profile to a website other than yours, you keep everything under one roof - your house, your rules. ;)

So, how do I build an alternative to Linktree on Squarespace?

I’m so glad you asked! There are a few steps, but trust me - it’s worth it.

If you'd rather have me set it up for you, I'd be happy to. Book a 30 minute session with me. It'll cost less than a year of Linktree!

STEP 1

Create a new Page in your “Not Linked” Section and call it Instagram or Fake Link Tree or something that you’ll recognize in 6 months when you come back to clean up your site. Give it a URL slug that makes sense. I used /links.

The NOT LINKED section in Squarespace Pages menu

I chose the “About 2” starter layout, since it was the closest to what I had in mind for my layout.

About 2 layout

Click Start Editing and then SAVE the page.

STEP 2

Next, we’ll get rid of the header and footer, give the background of the page a nice color, and style the text and buttons. Since we are making these changes on only one page, we’ll need to add the code to the Page Header Code Injection.

Click on the page settings like so:

Open page settings

Navigate to the Advanced Tab:

Advanced Tab of Page Settings

then paste in the code below and SAVE it.

<style> 
 /* set background color for page */
 body, main {
    background-color: #82a2a3!important;
   } 
 /* remove announcement bar, header and footer */ 
 .sqs-announcement-bar-custom-location {
 display: none !important;
 }
 .Header, .Header--top {
 display: none !important;
 }
 .Header-inner, .Header-inner--bottom {
 display: none !important;
 }
 .Footer-inner, .clear {
 display: none !important;
 }
   #footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom { 
 display: none !important;
 } 
 /* remove mobile header */ 
  .Mobile-bar { 
    display: none !important;
 }
 /* change text color */  
   p, a, h1, h2, h3 {
   color: #ffffff !important;
 }
 /* remove link underline */   
  .sqs-block-html p a {
    border-bottom-style: none;
  }
 /* change social icon colors */    
  .sqs-use--icon {
    fill: #ffffff !important;
}
 /* style buttons */      
  .sqs-block-button .sqs-block-button-element--small {
     color: #acb981 !important;
    width: 80% !important;
}
</style>

I’ve added comments to the code to let you know what each section does. You’ll want to tweak the colors using a hex code that is on-brand for you. Also, this code works for me on a Brine family template (Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West) but YMMV with other template families.

STEP 3

Add your content blocks like normal. I used the same image that’s on my Instagram profile for consistency, my Insta handle, and then a few buttons and a social media block.

A NOTE ON BUTTONS: I used a SMALL button (I don’t use it elsewhere on my website, all others are medium and large) and styled it normally in Design > Site Styles to be solid white.

Go back to the Page Settings and click on the SEO tab. Check the circle at the bottom that says “Hide this page from search engine results,” so no one will stumble across this on Google.

SEO Page Settings

STEP 4

Preview your page on your mobile device (since that’s how most people will be viewing it). If everything checks out, then edit your Website on your Instagram Profile to yoursite.com/links (or whatever URL slug you used).


If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your Instagram.