# Functions (/themes/sdk/reference/elements/functions)

```ts
import { … } from '@poltura/theme-sdk/elements';
```

## `overrideSection` [#overridesection]

Swaps the renderer of a platform section type; the platform keeps its schema, inspector and data.

```ts
overrideSection<T extends PlatformSectionType>(type: T, component: ElementComponent<PlatformSectionSettings<T>>): SectionOverride<T>
```

Settings arrive as stored, typed from the published platform schema. The platform draws the section's frame (merchant style, anchor, editor outline) around the renderer, so `attrs` is empty.

**Parameters**

- `type: T`: The platform section type.
- `component: ElementComponent<PlatformSectionSettings<T>>`: The theme's renderer.

**Returns:** The override; export it from a file under `src/sections`.

**Example**

```tsx
import { overrideSection } from '@poltura/theme-sdk/elements';

export const hero = overrideSection('hero', ({ settings }) => (
  <section style={{ color: settings.text_color }}>
    <h1>Welcome</h1>
  </section>
));
```

## `overrideBlock` [#overrideblock]

Swaps the renderer of a platform block type everywhere it appears; the platform keeps its schema.

```ts
overrideBlock<T extends PlatformBlockType>(type: T, component: ElementComponent<PlatformBlockSettings<T>>): BlockOverride<T>
```

A merchant may drop the block anywhere, so read page data from the nearest product or listing. The platform draws the block's frame around the renderer, so `attrs` is empty.

**Parameters**

- `type: T`: The platform block type.
- `component: ElementComponent<PlatformBlockSettings<T>>`: The theme's renderer.

**Returns:** The override; export it from a file under `src/blocks`.

**Example**

```tsx
import { overrideBlock } from '@poltura/theme-sdk/elements';

export const heading = overrideBlock('heading', ({ settings }) => (
  <h2>{settings.text}</h2>
));
```

## `fieldSet` [#fieldset]

A group of settings several elements share, such as a button's label and link; each call spreads its fields into a schema as `<prefix>_<key>`.

```ts
fieldSet<const S extends SettingsSchema>(fields: S): FieldSet<S>
```

The platform reads settings without running theme code, so a field set is a `const` of this file or one another theme file exports, built only from `field.*` calls.

**Parameters**

- `fields: S`: The set's settings, built with `field.*`.

**Returns:** The set; call it with a prefix and an optional heading.

**Example**

```tsx
import { defineSection, field, fieldSet } from '@poltura/theme-sdk/elements';

const button = fieldSet({
  label: field.text({ label: 'Label', default: 'Shop now' }),
  link: field.link({ label: 'Link', default: '/products' }),
});

export const promo = defineSection({
  type: 'promo',
  label: 'Promo',
  settings: { ...button('primary', { group: 'Primary button' }) },
  component: ({ settings }) => <a href={settings.primary_link?.href}>{settings.primary_label}</a>,
});
```

## `lazyBlock` [#lazyblock]

A component whose code loads in its own chunk, server-rendered unless `ssr` is false.

```ts
lazyBlock<P extends object>(load: () => Promise<{
    default: ComponentType<P>;
}>, options?: LazyBlockOptions): ComponentType<P>
```

**Parameters**

- `load: () => Promise<{ default: ComponentType<P>; }>`: Imports the module whose default export is the component.
- `options?: LazyBlockOptions`: The loading fallback and whether it renders on the server.

**Returns:** A component that draws the loaded one.