Getting started
Creating a site
Site pages
How Super worksCustomize your site
Site options
Custom domain
Site design
SEO options
Manual Publishing
Additional Features
Super Analytics
Extensions
Code Snippets
Using a templateAdvanced
Custom code
Creating a template
Template Starter Kit
Template Guidelines
Cloudflare proxyReference
Compatible blocks
Notion colors
Super CSS Classes
Product RoadmapCustom code
For people who have some basic web development skills or need to add third-party scripts, Super offers advanced and powerful customization through custom code snippets.
Applying custom code to your entire site
Custom code can be added to your entire site or on specific pages. To add code for the entire site head into your site editor (cog icon) and click into the Code page.
Head, Body and CSS
From here you have the option to add code in three tabs, 'Head', 'Body', and 'CSS'.
- The Head tab is used for adding scripts and other embed code for things like analytics, pop-ups, cookie consents, or chat bubbles.
- The Body tab is used for adding HTML to the body area of the page. Code will be added to the top of the page.
- The CSS tab is used for adding CSS code for styling. When placed here in the global code, the CSS will apply to every page.
Applying custom code to specific page
Applying code to an individual page can be done by clicking the code icon on a specific page in your site "Pages".
Customising your site appearance and adding styles
Any default styles on your page can be overridden with custom CSS in the "Code" page. The class names for elements on your site were intentionally designed to be easy to understand and override. You can view and learn more about all the CSS classes Super sites use here.
The colors of your site are also customizable through a set of CSS variables. You can find a list of default colors we use with their corresponding CSS variables here.
To learn more about customising your site's appearance check out our documentation on creating a template here.
← Previous
Next →