Unstack for Developers
  • Overview
  • Getting started
    • Custom Themes
    • Custom Components
  • Component Types
    • Section
    • Header & Footer
    • Banner
  • Basic Tags
    • Actions
    • Box
    • Code
    • Element
    • Media
    • Plaintext
    • Richtext
    • Collection
    • Article Collection
  • eCommerce Tags
    • Product
    • Product Inventory
    • Product Price
    • Product Options
    • Quantity Selector
    • Cart & Drawer (soon)
  • Utility Tags
    • Generator
    • JSONParser
  • Other NoML Features
    • Variables
    • Raw HTML
    • Component Properties
Powered by GitBook
On this page
  • Style Guide
  • Headers & footers
  • Custom integrations
  • Custom code blocks
  • Custom components
  1. Getting started

Custom Themes

How to make your site look exactly like you want.

PreviousOverviewNextCustom Components

Last updated 2 years ago

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

  • - make branding and style changes without code

  • - modify links, menus, and style, or go completely custom

  • - add custom code to every page

  • - add one-off code customizations to a single page

  • - customize your building blocks with code

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.

Headers & footers

Within the app, Unstack provides a way of customizing your header and 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.

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.

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

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:

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 .

- The main building blocks of Unstack pages.

- If the built-ins don't work for you you can go custom.

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

Learn more about customizing the Style Guide →
customizing your header or footer without code
Learn more about custom header & footer components →
Learn more about custom integrations →
Learn more about Custom Code blocks →
Sections
Banners
Learn more about building custom components →
Headers & Footers
The Style Guide
Headers & footers
Custom integrations
Custom code blocks
Custom components
Anyone with a small amount of HTML knowledge will feel at home in the component editor.