Site Configuration

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

Open site settings

Navigate to your site and click “Site” in the toolbar

Add a field

Click “Add Field” and choose your field type

Configure the field

Name: Internal identifier (e.g., logo, nav_items)
Label: Display name for editors
Type: Field type (text, image, repeater, etc.)

Use in blocks

Reference site fields in your blocks using Site Field fields:

Add a Site Field field to your block
Set the field key (e.g., logo)
Select which site field to reference

<!-- logo is a Site Field referencing the site's logo field -->
{#if logo?.url}
  <img src={logo.url} alt={logo.alt} />
{/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 <head> 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.

<style>
  :root {
    /* Colors */
    --color-primary: #ff6b35;
    --color-secondary: #004e89;
    --color-text: #1a1a1a;
    --color-background: #ffffff;

    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-size-base: 16px;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;

    /* Spacing */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;

    /* Layout */
    --max-width: 1200px;
    --border-radius: 8px;
  }
</style>

Then reference these variables in your block CSS:

<style>
  .hero {
    background: var(--color-primary);
    color: var(--color-background);
    padding: var(--spacing-xl) var(--spacing-md);
    border-radius: var(--border-radius);
  }

  h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
  }
</style>

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.

<!-- Reference site fields -->
{#if logo?.url}
  <link rel="icon" href={logo.url}>
{/if}

{#if site_name}
  <meta property="og:site_name" content={site_name}>
{/if}

<!-- Conditional analytics -->
{#if ga_id}
  <script async src="https://www.googletagmanager.com/gtag/js?id={ga_id}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{ga_id}');
  </script>
{/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:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

<!-- Plausible Analytics -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Filter admin routes from analytics: Prevent /admin routes from being tracked:

<!-- Only load analytics on public pages -->
{#if !window.location.pathname.startsWith('/admin')}
  <script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>
{/if}

Custom Fonts:

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Adobe Fonts -->
<link rel="stylesheet" href="https://use.typekit.net/abc1234.css">

Meta Tags:

<!-- Open Graph -->
<meta property="og:site_name" content="Your Site Name">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">

Favicon:

<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

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 </body> 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:

<!-- Intercom -->
<script>
  window.intercomSettings = {
    app_id: "YOUR_APP_ID"
  };
  (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/YOUR_APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
</script>

Third-party Tools:

<!-- Hotjar -->
<script>
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:YOUR_ID,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Body Footer HTML loads after page content, making it better for non-critical scripts. This improves perceived page load speed.

Getting Started

Building Sites

CLI

Collaboration

Content Management

Dashboard

Reference

Site Fields

Common Use Cases

Creating Site Fields

Head HTML

Common Use Cases

Body Footer HTML

Common Use Cases

Next Steps

Working with Fields

Understanding Slots

​Site Fields

​Common Use Cases

​Creating Site Fields

​Head HTML

​Common Use Cases

​Body Footer HTML

​Common Use Cases

​Next Steps

Working with Fields

Understanding Slots

Site Fields

Common Use Cases

Creating Site Fields

Head HTML

Common Use Cases

Body Footer HTML

Common Use Cases

Next Steps