# Custom Themes

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

* [**The Style Guide**](#style-guide) - make branding and style changes *without* code
* [**Headers & footers**](#header-and-footer) - modify links, menus, and style, or go completely custom&#x20;
* [**Custom integrations**](#custom-integrations) - add custom code to every page
* [**Custom code blocks** ](#custom-code-blocks)- add one-off code customizations to a single page
* [**Custom components**](#custom-components) - customize your building blocks *with* code

## Style Guide

{% hint style="info" %}
You must have the **Admin** role to view and edit the style guide.
{% endhint %}

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:

<figure><img src="/files/a73dlfXfTMAZZIvQeS9F" alt=""><figcaption></figcaption></figure>

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 →](https://support.unstack.com/hc/en-us/articles/1500004074422-Using-your-Styles-Guide)

## Headers & footers

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

<figure><img src="/files/ygOPRsxzuN9teP0gFJrs" alt=""><figcaption></figcaption></figure>

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](https://support.unstack.com/hc/en-us/articles/4406957404695-Header-Formatting-Options).

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 →](/docs/components/header-and-footer.md)

## Custom integrations

If you need a way to add custom code to *every page*, custom integrations are the way to go.&#x20;

<figure><img src="/files/OQ7TMOAdwCLB7jy8emsW" alt=""><figcaption></figcaption></figure>

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 →](https://support.unstack.com/hc/en-us/articles/360062442373-Adding-HTML-CSS-or-JavaScript-to-all-your-pages)

## 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.

<figure><img src="/files/DqbSXm6wVl35xtQ4s8Lh" alt=""><figcaption></figcaption></figure>

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 →](https://support.unstack.com/hc/en-us/articles/360062441913-Adding-HTML-CSS-or-JavaScript-to-single-page)&#x20;

## 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:

<figure><img src="/files/qtAcDAWFSuSfz1vsIzXg" alt=""><figcaption><p>Anyone with a small amount of HTML knowledge will feel at home in the component editor.</p></figcaption></figure>

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

* [**Sections**](/docs/components/section.md) - The main building blocks of Unstack pages.
* [**Headers & Footers**](#headers-and-footers) - If the built-ins don't work for you you can go custom.
* [**Banners**](/docs/components/banner.md) - Place anywhere on the page even above or below headers and footers.

[Learn more about building custom components →](/docs/getting-started/components.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.unstack.com/docs/getting-started/custom-themes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
