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

Click here to visit Aaron's Online Course Sales Page Template

The template look's like this:

Online course sales page template example

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.

You can create a Webflow account here

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:

Clone the online course sales page tempalte to your Webflow account

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.

Writing good copy and presenting targeted information will increase your online course sales page conversions

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

Publish your online course sales page template inside of the webflow designer


Open up your online course sales page — you can do this by clicking the small square with the arrow pointing out of it:

Visit your online course sales page template

Step #2: View Your Sales Page Source Code

Next you want to right click on your sales page > View Page Source (CTRL/CMD + U).

View your online course sales page source

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:

Open your online course sales page .css file from your source code

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

Copy your online course sales page CSS

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:

Delete your teachable sales page example blocks

And then add in a Custom Liquid/HTML block:

Add a custom Liquid/HTML block to your teachable sales page

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:

Teachable custom online course sales page css opening code

And at the end you can see we close off our code with </style>:

Teachable custom online course sales page css ending code

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

Copy your online course sales page code before the <body> tag and first <script> tag

Then inside your Teachable school, create a new Liquid/HTML block and paste in your code like so:

You should now have:

  1. A Liquid/HTML block with your sales page CSS — this code styles your page elements.
  2. 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.

Edit your Teachable online course checkout page

Then click the View Page button, and select "Copy course checkout page URL":

Get your Teachable 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):

Modify your custom HTML online course sales page button URL's to send users to your checkout page

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

Teachable sales page example of using extra meta data

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.

You'll learn:

  • 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?

You can click here to join for free now

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

Either way:

Leave a comment down below letting me know!

If you liked this post, give it a share it on your favorite platform: