# Defaults: StepsSection to StoreFormSection (/themes/sdk/reference/sections/defaults-12)

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

## `StepsSection` [#stepssection]

The platform's Steps section: numbered how-it-works list.

```ts
StepsSection(props: ElementRenderProps<PlatformSectionSettings<'steps'>>): ReactNode
```

**Props:** [`ElementRenderProps`](/themes/sdk/reference/elements/types-2#elementrenderprops)

<Tab value='Example'>

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

export const framed = overrideSection('steps', (props) => (
  <div className="theme-frame">
    <StepsSection {...props} />
  </div>
));
```

</Tab>
<Tab value='Source'>

```tsx title="source/steps-section.tsx"
import type { ReactElement } from 'react';
import {
  Slot,
  useChildBlocks,
  type ElementRenderProps,
  type PlatformSectionSettings,
} from '@poltura/theme-sdk/elements';
import { useIsEditing } from '@poltura/theme-sdk/editor';

function columnsClass(count: number): string {
  if (count <= 1) return 'grid-cols-1';
  if (count === 2) return 'grid-cols-1 sm:grid-cols-2';
  if (count === 3) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
  return 'grid-cols-2 lg:grid-cols-4';
}

function Heading({ heading, subheading }: { heading: string; subheading: string }) {
  if (!heading && !subheading) return null;
  return (
    <div className='mb-8 text-center'>
      {heading ? (
        <h2 className='text-2xl sm:text-3xl font-bold tracking-tight text-foreground break-words'>
          {heading}
        </h2>
      ) : null}
      {subheading ? (
        <p className='mt-2 text-sm sm:text-base text-muted-foreground'>{subheading}</p>
      ) : null}
    </div>
  );
}

export function StepsSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'steps'>>): ReactElement | null {
  const editing = useIsEditing();
  const steps = useChildBlocks();
  if (!editing && steps.length === 0) return null;
  return (
    <section className='border-t border-border/60 py-10 sm:py-16'>
      <div className='theme-container'>
        <Heading heading={settings.heading ?? ''} subheading={settings.subheading ?? ''} />
        <Slot
          className={`grid gap-6 [counter-reset:pt-step] ${columnsClass(steps.length)}`}
        />
      </div>
    </section>
  );
}
```

</Tab>


**See also:** [`overrideSection`](/themes/sdk/reference/elements/functions#overridesection)

## `StoreFormSection` [#storeformsection]

The platform's Form section: choose a form and show it on the page, in a popup or in a side panel.

```ts
StoreFormSection(props: ElementRenderProps<PlatformSectionSettings<'store-form'>>): ReactNode
```

**Props:** [`ElementRenderProps`](/themes/sdk/reference/elements/types-2#elementrenderprops)

<Tab value='Example'>

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

export const framed = overrideSection('store-form', (props) => (
  <div className="theme-frame">
    <StoreFormSection {...props} />
  </div>
));
```

</Tab>
<Tab value='Source'>

```tsx title="source/store-form-section.tsx"
import type { ReactElement } from 'react';
import type { ElementRenderProps, PlatformSectionSettings } from '@poltura/theme-sdk/elements';
import { FormPopup, StoreForm, useFormActions } from '@poltura/theme-sdk/forms';
import { useTranslations } from '@poltura/theme-sdk/i18n';
import { Button } from '@poltura/theme-sdk/ui';

const WIDTHS = { compact: 'max-w-sm', standard: 'max-w-2xl', wide: 'max-w-4xl' } as const;

export function StoreFormSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'store-form'>>): ReactElement {
  const t = useTranslations('storeForm');
  const { openForm, preloadForm } = useFormActions();
  const handle = settings.handle?.trim() || 'contact';
  const placement = settings.placement ?? 'inline';
  const form = {
    handle,
    display: placement === 'drawer' ? 'drawer' : 'popup',
    width: settings.width ?? 'standard',
    layout: settings.layout ?? 'stacked',
    appearance: settings.appearance ?? 'default',
  } as const;
  return (
    <section
      data-theme-section-type='store-form'
      className={`mx-auto w-full px-4 ${WIDTHS[form.width]}`}
    >
      {placement === 'inline' ? (
        <StoreForm handle={handle} layout={form.layout} appearance={form.appearance} />
      ) : (
        <>
          <Button
            data-form-preview=''
            type='button'
            className='min-h-11'
            onFocus={() => preloadForm(handle)}
            onPointerEnter={() => preloadForm(handle)}
            onClick={(event) => openForm(form, event.currentTarget)}
          >
            {settings.button_label || t('open')}
          </Button>
          {settings.trigger === 'automatic' ? (
            <FormPopup
              {...form}
              delaySeconds={settings.popup_delay_seconds ?? 30}
              frequency={settings.popup_frequency ?? 'once'}
            />
          ) : null}
        </>
      )}
    </section>
  );
}
```

</Tab>


**See also:** [`overrideSection`](/themes/sdk/reference/elements/functions#overridesection)