School owners on the Builder plan and above can add Meta tracking pixels, analytics tools, and other web services to their school using Code Snippets. This feature allows for advanced, school-wide customizations using Custom CSS and Head Code Snippets, including third-party chat widgets, tracking pixels, and design modifications.
CAUTION: Adding custom code to your school is an advanced modification—we can't guarantee full functionality or compatibility with current or future versions of Teachable. This includes how the code functions, as well as how it impacts the appearance of your school.
Custom CSS
If you have coding knowledge and want to further customize the appearance of your school, you can use Cascading Style Sheets (CSS). Custom CSS allows you to modify:
Fonts
Colors
Backgrounds
Layout styling
How to Add Custom CSS
Log in to your Teachable school.
Select Site.
Click Code Snippets.
Enter your code in the CSS field.
Click Save.
Custom CSS Best Practices
⚠️ Important Styling Guidelines
Avoid using
!importantin your custom CSS. This can override Teachable’s default styles, break layout behavior, and make troubleshooting difficult.Avoid overly broad selectors such as
.button,div,p, or global element selectors. These can unintentionally affect multiple components across your school.Always use specific, scoped selectors to prevent global styling conflicts.
Head Code Snippets
You can add HTML/JavaScript code inside the <head> tag on all pages in your school using Head Code Snippets.
Global Head Snippets
Add code to the Head Code Snippets section to apply it to all users and pages.
Logged-In Head Snippets
Use the Logged In Snippets section to apply code only for users who are logged in.
Logged-Out Head Snippets
Use the Logged Out Snippets section to apply code only for logged-out users.
After adding your code, click Save.
Important SSO Limitation: If you're using SSO, head code snippets do not affect SSO-based login or checkout pages (e.g., sso.teachable.com).
Troubleshooting & Styling Issues
If you are experiencing layout issues, broken styling, display problems, or unexpected visual behavior in your school, custom code is often the cause.
First-Step Troubleshooting Checklist
Before escalating or investigating platform issues, we recommend the following triage steps:
Navigate to Site > Code Snippets.
Check for any custom code in:
CSS
Head Code Snippets
Logged In Snippets
Logged Out Snippets
Temporarily remove the custom code, especially in the CSS section.
Click Save.
Refresh your school and check whether the issue still occurs.
Why This Matters
Custom CSS and injected scripts can:
Override default Teachable styles
Break layout structure
Hide UI elements
Conflict with platform updates
Cause inconsistent behavior across devices and browsers
If the issue is resolved after removing custom code, the cause is the custom implementation rather than the Teachable platform.
Support Limitation: Teachable Support cannot debug or maintain custom CSS, JavaScript, or third-party scripts. Troubleshooting and maintenance of custom code is the responsibility of the school owner or developer who implemented it.
Frequently Asked Questions (FAQ)
Why did my school’s layout or styling suddenly change?
In most cases, unexpected layout or styling changes are caused by custom CSS or injected scripts in Code Snippets. Platform updates can also expose conflicts with existing custom code.
How can I check if custom code is causing a styling issue?
Go to Site > Code Snippets and temporarily remove code from the CSS, Head Code Snippets, Logged In Snippets, and Logged Out Snippets sections. Save your changes and refresh your school to see if the issue persists.
Can Teachable Support fix issues caused by my custom CSS or scripts?
No. Teachable Support cannot debug, maintain, or repair custom CSS, JavaScript, or third-party code. These customizations are managed by the school owner or developer.
Why does my tracking pixel or script not fire on SSO pages?
Head code snippets do not apply to SSO-based login or checkout pages (e.g., sso.teachable.com).
Can I use Code Snippets for analytics and chat tools?
Yes. Code Snippets can be used to add tracking pixels, analytics tools, and third-party services, including chat widgets and monitoring tools.