Dynamic Section Slots

Some themes are sectionable — the store owner builds a page by adding, removing, and reordering sections (a product shelf, a banner, a newsletter block, and so on). Themes like Ipanema are built this way.

Every dynamic section on these themes automatically exposes two slots: one right before the section and one right after it. This lets your app inject content that flows with a section the merchant placed, wherever they placed it, without the theme having to predefine a fixed slot for it.

Slot naming

Dynamic section slots follow this shape:

before_dynamic_section_<section-name>_<section-instance-id>
after_dynamic_section_<section-name>_<section-instance-id>

For example:

before_dynamic_section_single-shelf_1782228052519
after_dynamic_section_single-shelf_1782228052519

A dynamic slot name is made of three parts:

1. A prefix — either before_dynamic_section_ or after_dynamic_section_.
2. The section name (e.g. single-shelf). This part is unrestricted.
3. A trailing underscore followed by the section instance id — a numeric sequence generated when the page is built.

Instance ids are generated per page

The numeric section instance id is created when the merchant's page is built, so it is not stable and cannot be hardcoded in your app. To target a dynamic slot, discover it at runtime with the Slot Discovery API , which returns each dynamic slot's ready-to-use slotId along with its section coordinates.

Rendering into a dynamic slot

The recommended flow is to discover the dynamic slots on the current page, pick the one you want by its section coordinates, and render into it:

import type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Box, Text } from "@tiendanube/nube-sdk-jsx";

export async function App(nube: NubeSDK) {
  const dynamics = await nube.api.getAvailableSlots().getDynamic();

  // Find the "before" slot of the first product-list section on the page.
  const target = dynamics.find(
    (slot) =>
      slot.sectionType === "product-list" &&
      slot.type === "before_dynamic_section",
  );

  if (target) {
    nube.render(target, [
      <Box key="promo">
        <Text>🔥 Limited-time deals below!</Text>
      </Box>,
    ]);
  }
}

render (and clearSlot) accept the DynamicSlot object returned by discovery directly, so you don't have to build the slot name yourself. See Slot Discovery → Rendering with a discovered slot .

If you already have a fully-formed dynamic slot name, you can also pass it as a string:

nube.render("before_dynamic_section_single-shelf_1782228052519", [/* ... */]);

Type-level validation

Dynamic slot names are validated at the type level through the DynamicUISlot type. A valid name resolves to itself; an invalid one resolves to never, so render / clearSlot reject it at the call site:

import type { DynamicUISlot } from "@tiendanube/nube-sdk-types";

type A = DynamicUISlot<"before_dynamic_section_single-shelf_1782228052519">;
//   => "before_dynamic_section_single-shelf_1782228052519"
type B = DynamicUISlot<"after_dynamic_section_single-shelf_1782228052519">;
//   => "after_dynamic_section_single-shelf_1782228052519"
type C = DynamicUISlot<"before_dynamic_section_single-shelf">;
//   => never — missing the numeric instance id

Related

• Slot Discovery API → — enumerate the dynamic slots present on the current page.
• Custom Slots → — theme-defined injection points.