Online Course Sales Page Template (Conversion Optimized)
In this guide you'll get your hands on an optimized online course sales page template...
...and the best sales page hacks to increase your conversion rate.
At the end of the day:
Creating a landing page for your online course should be a top priority...
...as it's the main part of your sales funnel that converts prospects into paying customers.
Online Course Sales Page Template
As promised here's my optimized online course sales page template which is designed to:
- Convert visitors into customers
- Reduce distractions (drive actions towards the one conversion goal of purchasing your course)
- Save you time
The template look's like this:
And yes, you can change everything on this page! The headings, copy, buttons, colors, fonts, images, videos, and so on... you name it, and it can be changed.
Note: The template is frequently updated, so it may look different — this is for the best, as the template is always being optimized to increase conversions.
To use this template you will need to follow these steps:
Firstly, this template was created using Webflow — a tool to design, build and launch websites.
Afterwards you will need to to clone the template into your Webflow Dashboard > Projects so that you can edit the template.
You can do this by clicking "Clone" on the Online Course Sales Page Template page:
Here's a video on how to clone, edit and publish your sales page template:
If you get stuck, I suggest using the Webflow University to learn how to use the tool.
Webflow is incredibly powerful due to the control it gives you whilst designing a website, and the best part is your are not stuck to a WordPress theme.
When designing your sales page:
You wan't to keep it simple and to the point...
...which can be done by focusing on writing copy, including images and videos, and adding social proof that resonates with your ideal course student.
Because good, targeted, and focused copy is what will increase your sales — not fancy website elements such as hover-over effects and sliders.
Using the Online Course Sales Page Template on Your Online School
After you've perfected your sales page by adjusting the copy, images, video, testimonials and so on...
You will need to export the code and use it on your schools sales page.
For this example, I will be showing you how to do this through Teachable as it's the best and most common platform for hosting and selling online courses.
Step #1: Publish Your Sales Page
In the Webflow visual editor, Click on Publish, select your default URL and then "Publish to Selected Domains".
Open up your online course sales page — you can do this by clicking the small square with the arrow pointing out of it:
Step #2: View Your Sales Page Source Code
Next you want to right click on your sales page > View Page Source (CTRL/CMD + U).
This will open up a new browser window that shows you the HTML code of your website.
You will be using this code for your online school sales page.
To get started:
Click on the link at the top that ends with ".css".
It can be a little tricky to find, but it should be at the top of your page like this:
Step #3: Copying Your Sales Page CSS Into Teachable HTML/CSS Blocks
With your CSS page open, you will want to select all of the code (CTRL/CMD + A) and then Copy it (CTRL/CMD + C).
Inside of your Teachable school...
...navigate to your sales page for the course you wan't to assign your sales page to.
This is in your Pages > Sales Page > "Edit".
Firstly, you will want to delete any blocks you already have:
And then add in a Custom Liquid/HTML block:
Finally you will want to add in the following code and paste your CSS in between the <style> tags:
[paste your CSS here]
It should look like this at the start with the opening <style> tag and then CSS code after:
And at the end you can see we close off our code with </style>:
Step #4: Do the Same for Your Sales Page HTML Code
Back on your Page Source tab, you will need to copy all the HTML between the <body> tag and first <script> tag.
If you do this correctly, it should look like this (I highlighted the <body> and first <script> tag for you):
Then inside your Teachable school, create a new Liquid/HTML block and paste in your code like so:
You should now have:
- A Liquid/HTML block with your sales page CSS — this code styles your page elements.
- Another Liquid/HTML block with your sales page HTML — this code is what displays and creates your elements
Step #5: Remove other Teachable Sales Page Example Blocks
Remove any other blocks on your sales page that you don't need if you haven't already.
In addition, you will want to turn off the two options:
- Show Navigation Bar
- Show Footer
Make sure to click "Save" and your sales page should now be updated!
You can click on Preview (top right in the Teachable dashboard) to see your sales page.
Step #6: Update Button's To Your Checkout URL
If you haven't already done this, you will need to change your URL's for your buttons to send users to your checkout page.
To do this:
Go inside your Teachable course, Pages > Checkout Page > Edit.
Then click the View Page button, and select "Copy course checkout page URL":
You can then use this code in your buttons on your sales page, you will just need to either:
- A. Easy) Modify your Webflow template and change the button's links there
- B. Harder) Or modify the code you pasted into your teachable Liquid/HTML blocks
If you take option B, you would be replacing the text inside the buttons <a href="URL HERE"> tags.
It would look like so (you can always use CTRL/CMD + F and search for Button to quickly find the code you need to modify):
And that's it! You now have a custom sales page that looks great and is optimized to make you more sales :)
Step #7: Add in Important Meta Data
Finally, you will want to add one more custom HTML/CSS block to your Teachable sales page.
In this block you will want to copy and paste in the following code:
<meta property="og:type" content="product" />
<meta property="og:title" content="Your Course Name/SEO Title" />
<meta property="og:description" content="A brief description about your course." />
<meta property="og:url" content="The URL of your online course"/>
<meta property="og:site_name" content="Your websites name" />
<meta property="og:price:amount" content="The price of your course" />
<meta property="og:price:currency" content="The currency code of your course (e.g. USD)" />
<meta property="og:availability" content="instock" />
For example it should look like this (taken off my free Course Starters course):
This lets websites and social platforms such as Pinterest display important information such as the title and price of your course correctly.
Which can help lead to sales.
Before You Go...Join Course Starters
Course Starters is a Free Mini-Course that teaches you how to create a profitable online course from scratch.
- How to find your profitable course idea
- How to record lessons
- How to create a sales page
- How to automate your sales funnel
Sounds good right?
How will you optimize your sales page?
Now you have an online course sales page template and know the best sales page hacks to boost sales...
...it's your turn to let me know what course are you selling.
Is it a course about web design? Maybe it's about saving money during tax season.
Leave a comment down below letting me know!