Summary
You can customize your LaunchNotes page beyond the standard design options by adding your own HTML and CSS code. This allows you to create custom headers, footers, hero sections, and styling that exactly matches your brand.
Before you begin
Custom HTML and CSS options are available on specific subscription tiers. Check the LaunchNotes pricing page to confirm your plan includes these features.
You must be a workspace admin to access customization settings.
Basic HTML and CSS knowledge is recommended for making custom changes.
Important security note: Custom code runs on your public page and can impact functionality and security. Only use code you fully understand and trust. Malicious or poorly written code can harm your site or expose sensitive information.
Where to find HTML and CSS customization options
Navigate to Settings > Customize page in your LaunchNotes admin dashboard.
Click the Custom HTML & CSS tab.
You'll see editors for Custom CSS, Custom head, Custom header, Custom footer, and Custom index hero.
Custom CSS
The custom CSS editor allows you to add your own styles. The CSS you add will be loaded on your public page. You must provide valid CSS or your changes will not be saved.
Custom head
The custom head editor gives greater control over your page, allowing you to add your own inline Javascripts, linked external assets, and analytics tracking, etc. You must provide valid HTML or your changes will not be saved.
Custom header
Gives you the ability to match your page branding with your marketing website, such as custom images, your logo, CTA's and navigation menus
Custom footer
Gives you the ability to add a custom footer to your LaunchNotes page to match your marketing website.
Custom index hero
Change the top hero section on the "index" of your LaunchNotes page. Note: this is not shared across pages when you click into an Announcement.
Help with template syntax
The Liquid HTML editor
To learn more about Shopify's Liquid, please view their documentation here. We provide several helpers in the base context for this editor to aid in your customization.
Available tags and helpers
All of these tags can be used using double parens {{ tag }}
subscribe_button renders the Subscribe to updates button, which will either redirect logged in subscribers to their subscriber management page or allow new visitors to create a subscription
project.id is the id of your project
project.name is the name of your project
project.public_permalink is the public root URL of your page (eg. https://updates.launchnotes.io)
project.slug is the URL slug of your project set under "Basic info"
project.heading is the heading text set under "Basic info"
project.subheading the sub-heading text set under "Basic info." This is a markdown field, which will be rendered accordingly.
Your project colors are set at the top of this page
project.primary_color
project.secondary_color
project.primary_text_color
project.secondary_text_color
project.white_color
project.off_white_color
project.light_gray_color
project.gray_color
Custom header / top navigation
The custom header editor is a Liquid HTML editor and allows you to override the top navigation header of your public page.
Custom index hero
The custom index hero editor is a Liquid HTML editor and allows you to override the index hero section of your public page.