Skip to main content
Look & feel: design & layout customization

Explore the different customization and branding options at each subscription tier for your public LaunchNotes page.

Michael Simmons avatar
Written by Michael Simmons
Updated over 2 years ago

We believe that your dedicated product updates page should feel like an extension of your brand. As such, you have the ability to manage the themes, design elements, and layout configuration of your public LaunchNotes page to match your branding and give your customers a more seamless experience.

This article will cover the following:

All public page customization settings are found under Settings > Customize page > Look & feel on the admin navbar.

Customization options vary by subscription tier

Depending on which subscription tier you're on, you'll have access to a different level of customization. For the most up-to-date details on feature sets, reference our pricing page.

Logo and color scheme customization

On all subscription tiers, you'll have the ability to host your own Logo and Favicon your page, select the layout Density (Compact, Normal or Comfortable), and choose a Design Theme, which allows you to pick from a series of preset color themes.

Layout customization

Layout customization gives you complete control over the look and feel of your public LaunchNotes page. You can bring your own CSS and HTML to make your page seamlessly fit within your company branding.

Layout customization options are also found under the Look & feel tab, below the Logo and color scheme customization options.

Jump ahead to more details on:

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.

The Liquid HTML editor

To learn more about 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.

Did this answer your question?