Overview

UI slots are containers for UI components. When you want to add a UI component, you need to specify their location on the screen, and to support the widest range of themes and layouts, we created predefined slots that are available across all templates that can be used to put your UI components inside.

You can render components into these slots using the nube.render() method and clear them using nube.clearSlot(). For more information, see Script Structure .

Slot Types

The Nube SDK provides different types of slots depending on where you want to render your components:

Checkout Slots

Slots available in the checkout flow (start and payment pages). These slots allow you to add custom content at specific points in the checkout process, such as before or after forms, payment options, and shipping information.

Learn more about Checkout Slots →

Storefront Slots

Slots available in the storefront pages (home, product, category, search, and cart). These slots are supported when the store is using the Patagonia theme and allow you to customize the shopping experience across different pages.

Learn more about Storefront Slots →

Fixed Slots

Fixed slots are anchored to the viewport with position: fixed and remain in place regardless of scrolling. They are available on every page where the SDK runtime is mounted, and edge_* slots share the same page coverage as corner_*.

Slot	Description
corner_top_left	Fixed position - top left
corner_top_right	Fixed position - top right
corner_bottom_left	Fixed position - bottom left
corner_bottom_right	Fixed position - bottom right
edge_top_center	Fixed position - top edge, horizontally centered
edge_bottom_center	Fixed position - bottom edge, horizontally centered
edge_left_center	Fixed position - left edge, vertically centered
edge_right_center	Fixed position - right edge, vertically centered
modal_content	Modal dialog content

edge_* behavior

The four edge_*_center slots place content at the midpoint of each viewport edge — top, bottom, left, and right. They are useful for floating notices, side rails, or attention-getting widgets that should stay visible while the user scrolls.

Each edge slot is sized so it never covers more than roughly half the viewport, leaving the main content readable behind it:

Slot	Anchor	Max size
edge_top_center	Top edge, centered	80vw × 45vh
edge_bottom_center	Bottom edge, centered	80vw × 45vh
edge_left_center	Left edge, centered	45vw × 80vh
edge_right_center	Right edge, centered	45vw × 80vh

Stacking order: edge slots render at z-index: 9997, beneath both the corner_* slots (9998) and modal_content (9999), so an open modal always covers an edge widget rather than the other way around.

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

export function App(nube: NubeSDK) {
  nube.render("edge_bottom_center", [
    <Box key="promo-banner">
      <Text>Free shipping on orders over $50!</Text>
    </Box>,
  ]);
}

Clear an edge slot the same way as any other slot:

nube.clearSlot("edge_bottom_center");

modal_content behavior

Any content rendered into the modal_content slot is displayed inside a dialog. When opened, the dialog adds a transparent backdrop to the page.

nube.render("modal_content", <Text>modal_content</Text>);

The dialog opens only when the slot has valid content. It can be closed by the customer by clicking the backdrop or pressing the Esc key. Clearing the slot will also close the dialog:

nube.clearSlot("modal_content")

When the dialog closes — either by the customer or programmatically — the SDK dispatches the custom:modal:close event. For details on listening to custom events, see Events — Custom events .

nube.on("custom:modal:close", () => {
  // handle cleanup or state updates
});

Usage

To render components into a slot, use the nube.render() method:

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

export function App(nube: NubeSDK) {
  nube.render("before_main_content", [
    <Text key="custom-text">Your custom content</Text>,
  ]);
}

To clear a slot, use the nube.clearSlot() method:

nube.clearSlot("before_main_content");