Your site theme controls the overall look and feel of your school. From the Site > Theme menu, you can update your logo, background, fonts, and color palette to reflect your brand.
Note: Schools on the Growth plan or higher can also remove most Teachable branding from their site.
Customize your logo and branding
You can update your logo, favicon, and school thumbnail from the top section of Site > Theme.
To manage images:
Upload – Add a new image
Replace – Swap an existing image
Remove – Delete the image
Image file name tips
Avoid symbols, spaces, or non-English characters in file names (for example, デザイン+講座.png).
Use simple names with letters, numbers, and hyphens instead, such as design-course-banner.png, to prevent display issues.
Site logo
Your logo appears in the top-left corner of all pages. Clicking it returns users to your homepage.
Recommended size: 250 × 60 px
Format: JPG or PNG
Favicon
The favicon is the small icon shown in your browser tab.
Recommended size: 32 × 32 px
Format: JPG or PNG
School thumbnail
The school thumbnail represents your school in the Teachable Accounts dashboard.
Recommended size: 960 × 540 px
Format: JPG or PNG
Open Graph image for link sharing
When someone shares your school URL on social platforms (such as Slack, Facebook, or iMessage), Teachable automatically generates a preview using an Open Graph (OG) image.
How Teachable selects the Open Graph image
Teachable uses one of the following images, in order of availability:
School thumbnail URL
School logo URL
If neither is available, the preview may appear blank or use a default fallback.
Recommended Open Graph image specifications
For best results when your link unfurls:
Recommended size: 1200 × 630 px
Minimum size: 600 × 315 px
Absolute minimum: 200 × 200 px (may not display well on all platforms)
Aspect ratio: 1.91:1
Formats supported: JPG or PNG
Not supported: SVG files
Tip: Use a high-quality image with minimal text and strong contrast to ensure it looks good across all platforms.
Removing Teachable branding
If you’re on the Growth plan or higher, you can toggle off Teachable Branding to remove most Teachable logos and references from your school.
Some Teachable branding may still appear:
In your school’s login and checkout page URLs
When students accept Teachable’s Terms of Use
Inside Teachable Accounts (if enabled)
To fully remove "teachable.com" from your domain (e.g., yourschool.teachable.com), you can set up your own custom domain.
Customize your font
You can change the font family used across your entire school.
Supported fonts
Metropolis (default)
Alegreya Sans
Arial
Helvetica
Lato
Lucinda Sans
Merriweather
Open Sans
Palatino
Raleway
Source Sans Pro
Using unsupported fonts
If your desired font isn’t listed, you may be able to add it using custom CSS. Teachable Support does not troubleshoot custom code.
Advanced options:
Site-wide CSS:
Go to Site > Code Snippets and add your CSS for global use.Page-specific CSS:
Insert a Custom HTML block on a sales page and define styles using a<style>tag.
Note: Some schools may not have the Custom HTML block enabled.
Customize your theme colors
You can update your color scheme in the Color Palette section of Site > Theme.
Choose from preset palettes, or
Create a custom palette using your brand colors
Teachable uses hex color codes. If your brand colors are in RGB or CMYK, use a color converter tool to find the hex equivalent.
Color categories
Each category controls different design elements:
Nav bar & footer background
Background color for:
Navigation bar
Footer
Email header
Navigation bar links
Font color for navigation links:
Fixed navigation
Scrolling navigation
Buttons & links
Controls colors for:
Buttons
Links
Course prices
Progress bars
Headings
Color for headings such as course and lecture titles.
Body text
General text color across your site and products.
Additional color settings
Video player – Controls the appearance of the course video player
Homepage heading & subtitle – Page Editor 1.0 only
Course page heading & subtitle – Page Editor 1.0 only
Note: Theme color edits do not currently affect the video player. Video player styling requires custom code or use of the Power Editor. You can set the player color for videos uploaded into course lectures.
Changing text color in banner blocks
You can update banner block text colors directly within the page editor.
Open the page editor and select the Banner block.
Navigate to the Design tab.
Under Text, adjust:
Heading Color – Updates banner headings
Text Color – Updates body text
Save your changes.
Frequently asked questions
Why aren’t my theme colors updating?
Theme changes usually appear within a few minutes. If you don’t see updates:
Try saving the color as black (
#000000) first, then switch back to your desired color.Clear your browser cache or perform a hard refresh.
Check whether your page is built in Page Editor 2.0, where block-level color overrides may apply.
If you pasted content from tools like Google Docs, hidden formatting may persist. Paste without formatting or retype the text.
After updating colors, click Update or Save in the editor.
Make sure the page is published.
Preview the live page to confirm changes.