Welcome 👋
Thank you so much for purchasing this template. It means a lot! I have put a lot of effort into making sure this page includes all the information you need.
Follow the ‘Getting started’ steps below to get up and running. If you have any issues please don’t hesitate to get in touch.
Thanks, Josh 🎉 Check out the table of contents to the right for easy navigation →
- Welcome 👋
- Getting Started
- Adding Analytics
- Managing Content
- Adding links and pages to each resource
- Setting up filtered views
- Setting up filtered pages
- Adding a button
- Important note about pricing property
- Adding your own Submit form
- Template options
- Main styles and colors
- Text alignment
- Page header alignment
- Cover image color blending
- Cover image behind page content
- Cover image border radius
- FAQ
- Support and Help
Getting Started
- Sign up with Super and Notion if you haven't already
- Click the 'Duplicate' button in the downloadable PDF to open the Notion page and then duplicate it to your own Notion workspace.
- Create a new site using Super using a public link newly duplicated Notion page (learn how here)
- Open your site in Super and click into the ‘Code’ page.
- In the 'Head' tab, copy and paste the code below into the code box.
- In the 'Body' tab, copy and paste the code below into the code box.
- Next inside Super click into the Navbar page on the sidebar to add a Navbar and customize it to your needs, you can do the same with the footer.
- Finally, head into the ‘Options’ page on the sidebar and enable ‘Database Views’ and optionally ‘Toggle theme’ to enable light/dark toggle as well as disable ‘page properties’ if you do not want them
- That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.
<link href="https://joshmillgate.github.io/hunt/style.min.css" rel="stylesheet" />
<script defer src="https://joshmillgate.github.io/hunt/script.min.js"></script>
Adding Analytics
Adding analytics to your site is an incredible way to get more insight about your users and your brand. Google analytics is often cited as being an unfriendly option and so I would recommend using Fathom instead, they are a great company that do not compromise privacy for data.
Managing Content
All the content in the Hunt theme is managed in a master database. At the top of the Hunt homepage in Notion you will find the main content database along with other hidden pages in the brown toggle block (this is hidden from your site so it is not visible to the public)
All of the main directory content is managed inside the ‘Content’ database. Then we can use the database filter options such as ‘Tags’ or ‘Featured’ to choose what content to show in different places on our site.
To hide content from your site you can uncheck the ‘Published’ checkbox, if you add new linked databases on your site make sure to add a filter for ‘only show items that have the published box checked’ like in the image below.
Adding links and pages to each resource
By default the main view of the ‘Content’ database on the home page, is setup so that each item within our database links out to an external page when clicked. This feature uses a custom property called ‘super:Link’. Learn more about how it works here.
If you want to make it so that each database item links to an internal page instead, simply do not include a link inside the ‘super:Link’ property and make sure to add some content inside the page.
Setting up filtered views
The Hunt site utilizes Notion’s ‘database views’ to share different content throughout the site. Have a look at the image below that shows the views setup for the content shown on the hunt homepage. You can remove, add or edit these views anywhere on the site.
Setting up filtered pages
Creating a filtered view page is simple, inside the control panel just press the ‘Crete a new filtered view page’ button. This will generate a template page where you simply need to add a filter inside the page and rename it. You can use this feature to have a page dedicated to certain categories like ‘free’, or ‘most popular’.
Adding a button
Adding a button is easy, simply write some text, make it bold and add a Link. Please note: buttons only work with a single text block on a line of it’s own. Refer to the main home page for reference on how the button is used.
Important note about pricing property
In order for the pricing property to show up correctly (in the top right corner of the card) it MUST be the last property in the list. If you remove the price property the information will not display correctly.
If you do not want to include the price tag in the way, you can paste the following snippet into your site settings > code > css tab.
.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
background: none!important;
border-radius: 0px!important;
color: var(--color-text-default)!important;
font-size: 16px!important;
font-weight: 300!important;
opacity: 1!important;
position: static!important;
}
Adding your own Submit form
To add a form where users can submit to your database (like on this page) you will need to use a third-party form system, I recommend Tally forms. Tally is a great tool and allows you to embed forms on a Notion page and connect any submissions with a database.
Template options
Hunt comes with several built in theme options. Simply paste the snippet below into your site settings > code > css tab. Then customize the CSS values by changing out the HEX color code or pixel sizes.
Main styles and colors
:root {
--primary-color: #202B3F;
--color-text-default: #202B3F!important;
--color-bg-default:#FBFCFF!important;
--button-bg-color: #202B3F!important;
--button-text-color: #ffffff!important;
--mobile-menu-background-color: #FFFFFF!important;
--list-item-border: #E1E9FF;
--list-item-hover: #F1F5FF;
--page-width: 1280px;
--button-rounding: 50px!important;
}
Text alignment
By default, the text alignment on the homepage is set to ‘center’. You can disable this with the following snippet:
#page-index .notion-text, h1.notion-heading:first-of-type {
text-align: left!important;
margin: 0!important;
}
Page header alignment
By default, the page header title and icon is aligned center on all pages. You can reset it back to the left hand side using the following snippet:
.notion-header__title-wrapper {
text-align: left!important;
}
.notion-header__icon-wrapper.has-icon, .notion-header__icon-wrapper.has-icon-image {
margin-left: 0!important;
margin-right: 0!important;
left: 0!important;
right: unset!important;
text-align: left!important;
}
Cover image color blending
By default, all cover images blend with a white background color, if you change the theme background color this may need to be changed or you may want to remove it.
To disable the cover image blending gradient, include this snippet:
.notion-header__cover:after {
background-image: none!important;
}
To change the cover image blending color, change the RGB values in this snippet to match your new background color:
.notion-header__cover:after {
background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(251, 252, 255, 1) 98%)!important;
}
Cover image behind page content
By default, cover images position as they would in Notion, (above the page content) except for the home page. The homepage cover is set to position behind the page content.
Reset the homepage cover position so it goes above page content:
#page-index .notion-header__cover.has-cover {
position: static!important;
max-height: 30vh!important;
height: 30vh!important;
margin-top: 0px!important;
}
Set cover image to go behind the page content on all pages
.notion-header__cover.has-cover {
position: absolute!important;
width: 100%!important;
top: 0!important;
margin-top: -20px!important;
height: 100vh!important;
max-height: 100vh!important;
z-index: -2!important;
}
Cover image border radius
:root {
--card-radius: 36px !important;
}
FAQ
Support and Help
If you have any issues with this template please get in touch via Twitter or by email at hello@joshmillgate.co.uk