How to Create A Sales Page in Squarespace & Ditch Leadpages
Okay, by now you probably all know how much I love Squarespace. But seriously, it just keeps getting better!
Recently I had a client come to me with a Squarespace subscription and also Leadpages subscription. Her website was hosted on Squarespace and she was planning to host her sales page for an upcoming membership program on Leadpages.
I asked her, "Why don’t I just create your sales page for you on Squarespace?" Because let’s be honest, if you are just using Leadpages for one basic sales page, and you’re already paying for your Squarespace site, it’s probably not worth it.
Obviously she said "YES!" but it got me thinking, maybe people don’t realise that you can create a sales page or landing page on your existing Squarespace website!
Because, well, you can! And it's an awesome way for small businesses to make the most out of their Squarespace subscription and save some money on fancy sales page software.
Don’t get me wrong, Leadpages is awesome and there is totally a time and place for it, but for a small start-up business I would definitely recommend saving your dollaz and doing it this way!
One of the awesome things about using this technique is that everything is all in one place. I’m all about making life easier by simplifying the amount of programs were using and things we are doing, because if you’re a small business owner, you’re probably already doing too much!
Another bonus is that If you already have learnt how to use Squarespace for your website, then you’ll be able to build this sales page no problem and not have to learn how to use any other software!
This process is really simple, but it will require choosing the right Squarespace template in the first place, and also entering a small snippet of code at the end. Don’t freak, I’ll talk you through these two things, they’re not as hard as they sound.
Let's get started!
The first step is to make sure using a Squarespace template that’s going to work. You’ll be able to create a sales or landing page with all Squarespace templates, but some will be better than others.
If you’re planning to have a really scaled back basic sales page, I wouldn’t worry about this step too much.
If you’re planning to have a long scrolling, more extensive sales page with lots of messages and copy, you'll want to make sure you’re using Squarespace template that supports stacked index pages.
My favourite Squarespace template that supports stacked index pages is the Brine family. If you’re already lost and not really sure what I’m talking about here, I suggest you head on over and read this post all about Squarespace templates and how to choose them. In that post I explain what template families are and there’s a breakdown of which templates have index pages and which don’t.
Like I said above, you can still create a sales page without index pages and just use a regular page layout, but you won’t get the long scrolling feel with full width images that we often see in large sales pages.
Once you have chosen your template and have and idea of what you’re going to do, head to your pages section, then in the not linked section add a new index page.
Your index page will display as empty and you can add pages within the index page. The different pages you add within the index page will be the different sections of your sales page.
From here you can get as creative as you want. The index page sections are unlimited so you can create as many page sections as you want.
Each templates index page feature works slightly differently, so I’m not going to give you a tutorial on how to use an index page. But Squarespace does a great overview of index pages but you can read here if you’re stumped.
Once you’ve built your sales or landing Page you'll notice that you still have your website header and footer on the page.
Best practice says on sales and landing pages you should always remove links that could take your visitor away from that page. You want to keep them on that page to the sign up, right?
So the best thing to do here is to remove your header and footer from this page so that your visitors won’t get distracted and navigate away.
But how do we do that? This is where the code comes in… again, stay with me, it’s pretty easy!
There’s two steps in this process. The first step is that we need to find the ID of our sales page. This is so we can tell Squarespace to only take the header and footer off of this one particular page and not the whole website.
1. Open up a new window (so you’re not in the editor) and go to your new sales page.
2. Right click anywhere and click view page source.
3. A new tab should open up with a whole bunch of code.
4. Now we need to search this code for your page identification number. The best way to do that is to click Command-F (Or Ctrl-F for Windows) to open up the search module.
5. In the search module type: " body ID= " and you will be shown something that looks like this:
6. You'll want to highlight and copy the section in the speech marks like below:
7. Then we need to go into the editor of our website and click Design > Custom CSS
8. In the box provided paste the following code but replace the collection number with your specific page identification number. Make sure you copy the code exactly as is, leave all of the brackets and the hash in place.
You should see in the preview that your header and footer from your sales page has now disappeared! If you want to get them back just remove the code.
If your code isn’t working, it might be because you’re using a template that has a slightly different underlying structure. This technique will work with all Squarespace templates, but if your templates header and footer are named something different, then the code might need some tweaking.
Let me know in the comments if you’re having trouble and if this code isn’t working and I’ll do my best to tweak it for your specific template.
I’m looking forward to seeing your amazing sales pages! Drop them in the comments and show me what you have created!