> ## Documentation Index
> Fetch the complete documentation index at: https://docs.primo.build/llms.txt
> Use this file to discover all available pages before exploring further.
# Site Configuration
> Configure site-wide settings, design systems, and global content.
Site configuration controls global settings that apply across your entire site. This includes design variables, global content fields, and custom HTML for scripts and analytics.
## Site Fields
**Site Fields** are global content that appears across multiple pages. They're perfect for content that needs to be consistent site-wide but may change over time.
### Common Use Cases
* **Logo**: Site logo that appears in the header
* **Navigation**: Main navigation menu items
* **Footer Content**: Footer links, copyright, social media
* **Contact Information**: Phone, email, address
* **Social Links**: Twitter, Facebook, LinkedIn profiles
* **SEO Defaults**: Default meta description, Open Graph image
### Creating Site Fields
Navigate to your site and click "Site" in the toolbar
Click "Add Field" and choose your field type
* **Name**: Internal identifier (e.g., `logo`, `nav_items`)
* **Label**: Display name for editors
* **Type**: Field type (text, image, repeater, etc.)
Reference site fields in your blocks using Site Field fields:
1. Add a Site Field field to your block
2. Set the field key (e.g., `logo`)
3. Select which site field to reference
```svelte theme={null}
{#if logo?.url}
{/if}
```
Site fields are reactive. When you update them, all blocks using them update automatically across your entire site.
## Head HTML
The **Head HTML** section lets you add custom HTML to the `` of every page on your site. Use this for analytics, fonts, meta tags, and other site-wide scripts.
Head HTML supports Svelte syntax and has access to site fields, allowing you to dynamically generate content based on your site configuration.
### Common Use Cases
**CSS Variables (Design System):**
Define a design system for your site using CSS Custom Properties. Define colors, typography, spacing, and other design tokens once, then use them across all your blocks.
```html theme={null}
```
Then reference these variables in your block CSS:
```svelte theme={null}
```
Use semantic naming (e.g., `--color-primary`) rather than descriptive names (e.g., `--color-orange`) so you can change values without renaming variables.
**Using Svelte:**
You can use Svelte syntax to dynamically inject content based on your site configuration.
```html theme={null}
{#if logo?.url}
{/if}
{#if site_name}
{/if}
{#if ga_id}
{/if}
```
To use site fields in Head HTML, first create the fields in Site → Fields, then reference them by name in your Head HTML code.
**Analytics & Tracking:**
```html theme={null}
```
**Filter admin routes from analytics:** Prevent `/admin` routes from being tracked:
```html theme={null}
{#if !window.location.pathname.startsWith('/admin')}
{/if}
```
**Custom Fonts:**
```html theme={null}
```
**Meta Tags:**
```html theme={null}
```
**Favicon:**
```html theme={null}
```
Head HTML is added to every page. Keep it minimal to avoid slowing down your site. Non-critical scripts (analytics, chat widgets, etc.) should be placed in Body Footer HTML instead to improve page load speed.
## Body Footer HTML
The **Body Footer HTML** section lets you add custom HTML before the closing `` tag of every page. Use this for scripts that should load after the page content.
Body Footer HTML only supports static HTML - it does not support Svelte syntax or access to site fields. If you need dynamic content, use the Head HTML section instead.
### Common Use Cases
**Chat Widgets:**
```html theme={null}
```
**Third-party Tools:**
```html theme={null}
```
Body Footer HTML loads after page content, making it better for non-critical scripts. This improves perceived page load speed.
## Next Steps
Learn how to create and use fields in blocks
Master page type slots for consistent layouts