# Defaults: RelatedProductsSection to RichTextSection (/themes/sdk/reference/sections/defaults-10)

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

## `RelatedProductsSection` [#relatedproductssection]

The platform's Related products section: recommendations under the PDP.

```ts
RelatedProductsSection(props: ElementRenderProps<PlatformSectionSettings<'related-products'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

```tsx title="source/related-products-section.tsx"
import type { ReactElement } from 'react';
import type { ElementRenderProps, PlatformSectionSettings } from '@poltura/theme-sdk/elements';
import { ProductRail } from '@poltura/theme-sdk/listing';
import { useRelatedProducts } from '@poltura/theme-sdk/product';
import { Link } from '@poltura/theme-sdk/routing';

function RelatedProductsRail({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'related-products'>>): ReactElement {
  const { data: cards } = useRelatedProducts(
    { limit: Math.max(1, settings.limit ?? 8) },
    { suspense: true },
  );
  const title = settings.title ?? '';
  const subtitle = settings.subtitle ?? '';
  const viewAllHref = settings.view_all_href ?? '/products';
  const viewAllLabel = settings.view_all_label ?? '';
  return (
    <section className='border-t border-border/60 py-12'>
      {cards.length > 0 ? (
        <ProductRail
          cards={cards}
          title={title}
          subtitle={subtitle}
          viewAllHref={viewAllHref}
          className='py-0'
        />
      ) : (
        <div className='container mx-auto px-4 text-center'>
          <h2 className='text-2xl font-bold tracking-tight'>{title}</h2>
          {subtitle ? <p className='mt-2 text-muted-foreground'>{subtitle}</p> : null}
          <p className='mt-4 text-sm text-muted-foreground'>{settings.empty_body ?? ''}</p>
          {viewAllHref && viewAllLabel ? (
            <Link
              href={viewAllHref}
              className='mt-6 inline-flex text-sm font-semibold text-primary underline-offset-4 hover:underline'
            >
              {viewAllLabel}
            </Link>
          ) : null}
        </div>
      )}
    </section>
  );
}

export function RelatedProductsSection(
  props: ElementRenderProps<PlatformSectionSettings<'related-products'>>,
): ReactElement | null {
  if (!(props.settings.enabled_block ?? true)) return null;
  return <RelatedProductsRail {...props} />;
}
```

</Tab>


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

## `RichTextSection` [#richtextsection]

The platform's Rich text section: heading + body copy block.

```ts
RichTextSection(props: ElementRenderProps<PlatformSectionSettings<'rich-text'>>): ReactNode
```

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

<Tab value='Example'>

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

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

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

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

export function RichTextSection({
  settings,
}: ElementRenderProps<PlatformSectionSettings<'rich-text'>>): ReactElement {
  const align = settings.align === 'left' ? 'text-left' : 'text-center';
  return (
    <section className='border-t border-border/60 py-8 sm:py-12'>
      <div className={`container mx-auto max-w-2xl px-3 sm:px-4 ${align}`}>
        <h2 className='text-xl sm:text-2xl font-bold tracking-tight text-foreground break-words'>
          {settings.heading ?? ''}
        </h2>
        <EditableRichText
          setting='body'
          className='mt-3 space-y-3 text-sm sm:text-base text-muted-foreground leading-relaxed'
        />
        <Slot className='mt-4 flex flex-col gap-3' />
      </div>
    </section>
  );
}
```

</Tab>


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