Site Configuration

Configure site-wide settings, design systems, and global content.

Define site fields for shared content, such as a logo and navigation links. Use Head HTML for metadata and shared styles, and Body Footer HTML for static markup or scripts before the closing body tag. The field names, metadata tags, and CSS variables below are examples you add yourself.

Create site fields

You need developer access to define fields.

1. Open the site editor

   Choose Site in the toolbar and open its Content fields.

2. Add global content

   Add site_name as Text and logo as Image. For navigation, use a Repeater with nested Link fields. Set default content and save.

3. Reference a field from a block

   Add a Site Field to the block, set its key to logo, and select the site’s logo field. Render it like any Image field:

   {#if logo?.url}
     <img src={logo.url} alt={logo.alt || ""} />
   {/if}
   

   A block field with the same name does not connect automatically to a site field.

4. Verify and publish

   Save the dialog and check more than one page. Referenced site content updates across the editor; publish the site to update public pages.

Head HTML

The site’s Head HTML and page type’s Head HTML are compiled together as Svelte. Both receive site fields merged with the current page’s fields; page fields take precedence when names overlap. In a CLI export, these fragments live in site/head.svelte and page-types/<type>/head.svelte.

Primo inserts the fragment inside <svelte:head>. Do not add your own <svelte:head> wrapper. Head fragments must contain head elements such as <title>, <meta>, <link>, <style>, and external scripts.

Branding metadata

After creating the Text field site_name and Image field logo, add:

head.svelte

{#if site_name}
  <meta property="og:site_name" content={site_name} />
{/if}
{#if logo?.url}
  <link rel="icon" href={logo.url} />
{/if}

Page metadata

Create meta_title and meta_description Text page fields, then add this to the page type’s Head HTML:

head.svelte

<title>{meta_title || "My Site"}</title>
{#if meta_description}
  <meta name="description" content={meta_description} />
{/if}

Head fragments use markup and bare field names; do not declare $props() or component logic in a <script> block here.

Field names do not generate metadata automatically. Check the published page source to verify the title and meta tags. Put <title> only in the page type fragment: the site fragment is processed first, and its title can suppress a later page title.

Shared styles and fonts

Define CSS custom properties (variables) in the site’s Head HTML and reuse them in block styles. Names such as --color-primary are defined by this example, not supplied by Primo:

head.svelte

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
  :root {
    --color-primary: #004e89;
    --color-text: #1a1a1a;
    --font-primary: 'Inter', sans-serif;
    --spacing-lg: 2rem;
  }
  body { font-family: var(--font-primary); color: var(--color-text); }
</style>

component.svelte

<section class="hero"><h1>{headline}</h1></section>

<style>
  .hero { padding: var(--spacing-lg); }
  h1 { color: var(--color-primary); }
</style>

Add a Text field named headline to the block before using it. Preview and publish a page to verify both the shared styles and scoped block styles.

Body Footer HTML

Body Footer HTML is inserted verbatim before </body>. It does not resolve Svelte expressions or field references. In CLI files, it lives in site/foot.html or page-types/<type>/foot.html. CMS v3.3.1 publishing and CLI 0.2.1 static builds include both fragments. Older CLI 0.2.0 builds include only the site fragment.

Use this area for static provider embed code, such as an analytics script or chat widget. Obtain the snippet from the provider and replace its public site identifiers. Never put API secrets in code delivered to visitors.

Browser globals such as window belong in scripts that execute in the browser. Do not use {#if window.location...} in Head HTML: that expression also runs while Primo generates static HTML, when window is unavailable.

Custom scripts can execute in previews as well as published pages. Configure your provider to exclude preview or admin traffic as appropriate; do not assume the admin URL is the only preview context.

Verify configuration changes

Ensure the page contains at least one rendered block: CMS publishing does not compile custom head content for completely empty pages. Save the Site dialog, preview a page, and check browser DevTools for script or font errors. For file edits, run primo validate -d sites/my-site. Publish and inspect the public page’s source and Network panel to confirm metadata, styles, and scripts are present.

Next steps

Working with fields

Connect blocks to global content.

Publishing

Make saved configuration changes public.