Custom Themes

How to make your site look exactly like you want.

Unstack provides a number of tools — both code and no-code — to customize your site's appearance. These include:

Style Guide

You must have the Admin role to view and edit the style guide.

The Unstack style guide provides a quick way to customize the branding and styles of your site without using code. It's designed to be so simple that anyone can use it:

Many aspects of your theme can be customized in the Style Guide, including:

  • Branding

  • Typography

  • Button styles

  • Forms styles

  • Layout

  • And more...

If you're not sure if Unstack has a no-code way of customizing your theme, the Style Guide is a great place to start. Component developers will especially want to be familiar with what's exposed here.

Learn more about customizing the Style Guide →

Headers & footers

Within the app, Unstack provides a way of customizing your header and footer without code:

This allows you to customize your menus, styles, and the basic layout of your header. The built-in header and footer do have some limitations, but they are excellent for customizing your header or footer without code.

If the built-in header and footer don't meet your needs, you can also build your own header and footer components with code.

Learn more about custom header & footer components →

Custom integrations

If you need a way to add custom code to every page, custom integrations are the way to go.

Custom integrations can be used to:

  • Tweak global CSS for things not customizable in the Style guide

  • Add additional scripts for analytics or functionality

  • Add a global banner at the top or bottom of the page

  • And more...

A custom integration can be inserted before or after the content of the page, or in the <head> of the HTML.

Learn more about custom integrations →

Custom code blocks

If you only need to add custom code to a single page, Unstack includes a Custom Code component that can be easily inserted into a page with the Add Section button within the page editor.

To add a custom code block:

  1. Click the Add section button

  2. Navigate to the Custom Code category

  3. Select the Custom Code component

Learn more about Custom Code blocks →

Custom components

Building your own components will give you the ultimate flexibility. Unstack provides a simple component editor where you can develop components in a live preview environment:

The component editor can be used to build a few different types of components:

  • Sections - The main building blocks of Unstack pages.

  • Headers & Footers - If the built-ins don't work for you you can go custom.

  • Banners - Place anywhere on the page even above or below headers and footers.

Learn more about building custom components →

Last updated