1. Duplicate the template to Notion

The first step in getting started is to sign up to Notion and Super, then duplicate the template content into your own Notion workspace. Click the button below and then click ‘Duplicate’ at the top right.

Duplicate to Notion

2. Create an upgraded site on Super

Next, create a site on Super with the Notion page you just duplicated. Learn how here.

Note: In order to apply a custom template to your site you will need an upgraded site.

3. Apply the custom template

Then, open your new site settings, navigate to the ‘Code’ page and inside the ‘Head’ tab, paste the following snippet. You might notice the design doesn’t look exactly the same as the demo, we’ll fix that in the next step.

<link rel="stylesheet" href="https://sites.super.so/warp/style.css">

4. Apply the theme settings

Next, we’ll enable the Super theme so you can customize it as you like!

1. Click this link to duplicate the Warp theme to your Super account
2. Go back to the dashboard and into your site, in the ‘Design’ page - apply the Warp theme.

5. Customize your site

Next you can add more features and customize your site to your liking.

1. Head into the ‘Navbar’ page to add and customize a navbar.
2. Head into the ‘Footer’ page to add and customize a footer.
3. Head into the ‘Options’ page to enable/disable:
1. Page properties (Shows database properties on database pages)
2. Database view switcher (Enable switch between database views)
3. Theme toggle (Enables a light/dark toggle on your navbar)

Thats it! Then just update the content in Notion 🎉

Further customization

You can customize this template further using Super’s built in design options. Please note, because this is a custom template which overrides certain values, some of the options inside your site design will not work as expected.

For the theme to match the demo site, you might want to set Dark mode as your default color mode, you can do that by going into Themes > Warp > Colors > Set the Default color mode at the top to ‘Dark’.

Changing the primary color

By default, the primary color of the site is determined by the navbar button background color. You can change this in the Themes > Warp > Colors > Navbar page.

:root {
  --primary-color: #392C72!important;
}

Changing images for light/dark mode

Whilst we are working on a native solution to creating dark and light mode images and logos on your site, there are some experimental solutions you can try on your site. To learn more about how you can make your navbar logo change with light and dark mode, read this post on our community here.