> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/developer-platform/blocks.md).

# Developer blocks

The Custom liquid block and section for raw Liquid, HTML, CSS, and JS, and the Page content block for rendering a page resource's stored HTML.

Use "Custom liquid" when a theme setting or block can't produce the markup you need. The block adds Liquid inside another section. The section adds Liquid at section level. "Page content" renders the stored HTML from a Shopify page.

## Custom liquid or Page content

Custom liquid renders the input without escaping or sanitizing it. Liquid runs at render time, including `{{ shop.name }}`, `{{ product }}`, loops, and conditionals. "Output" either adds a wrapper `<div>` or renders the input with no wrapper.

Page content doesn't accept code. It selects a Shopify page and renders the page's body HTML with theme typography.

## The Custom liquid block

Add the block inside a [Custom section](/building-pages/custom-section.md) or any other section that accepts blocks. It has three settings.

### Output

| Option            | What the theme emits                                                    | Use for                                                                                                    |
| ----------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| Wrapped (default) | Your code inside `<div class="w-full entrance-item entrance-standard">` | Visible content that animates in with the section and stays selectable in the editor                       |
| Raw               | Your code and nothing else                                              | `<style>`, `<script>`, `<link>`, `@font-face`, JSON-LD, or anything else that can't have a wrapper `<div>` |

{% hint style="warning" %}
The theme editor can't highlight or scroll to Raw output because there is no element to select. Use Wrapped for visible content. Use Raw for assets and code that can't have a wrapper.
{% endhint %}

### Prevent dynamic updates

Cart and product form changes can re-render a section. This repeats side effects in Custom liquid, such as a `<script>` that mounts a widget. Turn on "Prevent dynamic updates" to add `data-morph-update="none"` to the wrapper. Section updates will then leave the block alone.

Turn it on when your block runs one-time initialization or holds state that a re-render would reset. The setting only appears in Wrapped output, because Raw output has no element to mark.

## The Custom liquid section

The Custom liquid section has the same settings, plus the standard "Section layout" and "Appearance" groups for width, padding, and color scheme. Use the section for a complete page section. Use the block between other blocks.

Two behaviours differ from the block:

* In Raw output the code also skips the theme's section wrapper, so it lands unwrapped in the page flow.
* The section is disabled in the header and in the overlay and drawer groups.

## Recipe: self-hosted font

Use the theme's [typography settings](/core-concepts/typography.md) and Shopify font library when possible. Use this setup for a font that isn't in the library.

Add a Custom liquid block in a footer section, set "Output" to "Raw", and paste:

```liquid
<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<style>
  @font-face {
    font-family: 'Founders Grotesk';
    src: url('https://fonts.example.com/founders.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }

  /* Apply it. Target a scheme, a section, or :root for everything. */
  :root {
    --font-heading--family: 'Founders Grotesk', sans-serif;
  }
</style>
```

Footer placement keeps the code out of the initial page content. `@font-face` and `:root` custom properties still apply to the whole document.

{% hint style="info" %}
Storefronts use a Content Security Policy. Inline `<style>` and `<script>` work, but a font, script, or style URL on a blocked host fails with no visible error. Upload the `.woff2` to the store's Files and use its `file_url`, or serve it from a host the store allows.
{% endhint %}

## The Page content block

The block renders a selected page's `page.content` inside a `prose` wrapper, so tables and rich text use the theme's typography. Use it for HTML written in the page editor or added by an app, such as a shipping table or size chart. Liquid inside `page.content` doesn't run.

| Setting                       | Effect                                               |
| ----------------------------- | ---------------------------------------------------- |
| "Page"                        | The page resource whose body HTML renders            |
| "Text size"                   | The `prose` scale, from `xs` to `xl`                 |
| "Limit width" and "Max width" | Constrain the text measure                           |
| "Color"                       | Optional text color override, scheme color or custom |

When no page is selected the block renders an empty wrapper, so it stays selectable in the editor.

{% hint style="info" %}
Use Custom liquid for your own markup. Use Page content only when the HTML is stored on a page resource.
{% endhint %}

## See also

* [Custom code](/developer-platform/custom-code.md): `custom.css` and JavaScript files for site-wide code
* [Theme events](/developer-platform/events.md): events available to Custom liquid scripts
* [The Custom section](/building-pages/custom-section.md): the usual host for these blocks
* [Layout blocks](/building-pages/layout-blocks.md): structural blocks to use before Custom liquid
* [Global settings & local overrides](/core-concepts/settings-cascade.md): CSS variables controlled by settings