A Linktree Alternative for Squarespace Users (or How to Remove the Header and Footer from one Page)

Keep scrolling for specific code for Squarespace 7.0 and 7.1 ↓

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.

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.

Squarespace 7.0 (keep scrolling for 7.1 ↓)
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.

I chose the “About 2” starter layout, since it was the closest to what I had in mind for my 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:

Navigate to the Advanced Tab:

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.

UPDATE for Squarespace 7.1

To remove the header and footer on Squarespace 7.1, use this code instead in the Page Header Code Injection:

<style> 
  .header, footer, .Mobile-bar--top {
    display: none!important;
  }
</style>

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.

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).