How to build custom sales pages on Teachable

intermediate 8 min read Updated 2026-03-18

Quick Answer

Building custom sales pages on Teachable involves accessing your course settings, customizing the sales page template, and adding custom HTML/CSS for advanced styling. You can modify headlines, descriptions, pricing sections, and testimonials to create compelling sales pages that convert visitors into students.

Try Teachable Full Teachable Review

Prerequisites

Active Teachable account
Course created in Teachable
Basic HTML/CSS knowledge
Images and content for your sales page

Step-by-Step Instructions

Access Your Course Sales Page Settings

Navigate to your Teachable admin dashboard and select Courses from the main menu. Click on the course you want to create a sales page for, then select Sales Page from the course management sidebar. This will open the sales page editor where you can customize your page layout and content.

Make sure your course is published before customizing the sales page to see live preview changes.

Choose and Customize Your Sales Page Template

In the sales page editor, click Change Template to browse available templates. Select a template that matches your brand aesthetic and course type. Once selected, use the Page Builder to drag and drop elements like headers, text blocks, images, and video sections. Customize colors, fonts, and spacing using the style panel on the right side.

Start with a template that's closest to your vision to save time on customization.

Add Custom HTML and CSS Code

For advanced customization, scroll down to the Custom Code section in your sales page settings. Add your custom HTML in the Header Code field and CSS styling in the Footer Code field. Use <style> tags for CSS and ensure your code is properly formatted:

<style>
.custom-header {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  padding: 50px;
  text-align: center;
}
</style>

Always test your custom code on different devices to ensure responsive design.

Configure Pricing and Call-to-Action Sections

Navigate to the Pricing section in your sales page editor. Set up your course pricing, payment plans, and any special offers or discounts. Customize the Buy Now button text, colors, and positioning. Add urgency elements like countdown timers or limited-time offers using the available widgets or custom HTML.

Use contrasting colors for your CTA buttons to make them stand out and increase conversion rates.

Add Social Proof and Testimonials

In the page builder, drag a Testimonials block to your sales page. Upload student photos, add their testimonials, and include their credentials or results. You can also add Social Media blocks to display follower counts, reviews, or embedded social posts. Arrange these elements strategically throughout your sales page for maximum impact.

Place testimonials near pricing sections to address potential objections at the decision-making moment.

Optimize for Mobile and Preview Changes

Click the Mobile Preview button to see how your sales page looks on different screen sizes. Adjust text sizes, image dimensions, and spacing for mobile optimization. Use the responsive design controls to hide or show elements on specific device types. Make sure all buttons and links are easily tappable on mobile devices.

Over 60% of course purchases happen on mobile devices, so prioritize mobile optimization.

Set Up SEO and Analytics Tracking

In the sales page settings, add your Page Title, Meta Description, and SEO Keywords for better search engine visibility. Install Google Analytics or Facebook Pixel tracking code in the Analytics section. Add UTM parameters to track traffic sources and campaign performance.

Keep your meta description under 160 characters and include your main keyword for better search rankings.

Publish and Test Your Sales Page

Once you're satisfied with your design, click Save Changes and then Publish. Test your sales page by visiting the live URL and going through the entire purchase process. Check that all links work, forms submit properly, and the checkout process is smooth. Monitor your page performance using Teachable's built-in analytics dashboard.

Create a test purchase using a small discount code to ensure the entire funnel works correctly.

Common Issues & Troubleshooting

Custom CSS not applying to sales page elements

Make sure your CSS is wrapped in <style> tags and placed in the Footer Code section. Use !important declarations to override default Teachable styles, and inspect element classes using browser developer tools.

Sales page looks broken on mobile devices

Check your custom CSS for fixed widths or absolute positioning. Use responsive units like %, em, or vw/vh instead of fixed px values. Test on actual devices, not just browser mobile simulation.

Images not loading or appearing pixelated

Ensure images are optimized for web (under 1MB each) and uploaded in high resolution. Use 2x resolution for retina displays and compress images using tools like TinyPNG before uploading to Teachable.

Purchase button not working or redirecting incorrectly

Verify that your course is published and pricing is properly configured. Check that you haven't accidentally overridden the button's default action with custom code. Clear browser cache and test in incognito mode.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Teachable website before purchasing.

Visit Teachable View Teachable Pricing