Storefront Slots

Storefront slots are containers available in the storefront pages where you can render your UI components. These slots allow you to customize the shopping experience across different pages.

Theme Compatibility

Storefront apps built with NubeSDK are supported only when the store is using the Patagonia theme. For all other themes, you must use the legacy storefront app model.

Available Slots

These are the slots that are available in the storefront:

Slot	Page
before_main_content	home, product, category, search
after_header	home, product, category, search, cart
drawer_left	home, product, category, search, cart
drawer_right	home, product, category, search, cart
before_quick_buy_add_to_cart	home, category, search
before_product_grid_item_name	home, category, search
after_product_grid_item_name	home, category, search
before_product_grid_item_price	home, category, search
after_product_grid_item_price	home, category, search
product_grid_item_image_top_left	home, product, category, search
product_grid_item_image_top_right	home, product, category, search
product_grid_item_image_bottom_left	home, product, category, search
product_grid_item_image_bottom_right	home, product, category, search
before_go_to_checkout	home, product, category, search
before_product_detail_name	product
after_product_detail_name	product
before_product_detail_price	product
after_product_detail_price	product
before_product_detail_add_to_cart	product
after_product_detail_add_to_cart	product
after_product_description	product
before_line_items	cart
before_line_item	cart
after_cart_summary	cart
after_go_to_checkout	cart
before_footer	home, product, category, search

Slot Visual Reference

Home, Category, and Search Pages

• before_main_content

• after_header

Important

On the Patagonia theme, merchants can enable a transparent header option. When this setting is active, the after_header slot is hidden and will not be rendered.

• drawer_left

• drawer_right

• before_go_to_checkout

• before_footer

Product Grid Slots

Product grid slots are special slots that allow you to render components on product cards within product grids. These slots include:

• product_grid_item_image_top_left
• product_grid_item_image_top_right
• product_grid_item_image_bottom_left
• product_grid_item_image_bottom_right
• before_product_grid_item_name
• after_product_grid_item_name
• before_product_grid_item_price
• after_product_grid_item_price

Rendering Components in Product Grids

To render components in product grids, return an array of components where the root element for each product includes the key prop set to that product's ID. This allows your app to render components across multiple items in the grid.

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

export function App(nube: NubeSDK) {
  const productIds = [1, 2, 3];
  nube.render("product_grid_item_image_top_left", () => {
    return productIds.map((id) => <Text key={id}>ID: {id.toString()}</Text>);
  });
}

For a complete example of rendering components dynamically in product grids, see the Dynamic Product Grid Rendering section below:

Product Page Slots

• before_product_detail_name
• after_product_detail_name
• before_product_detail_price
• after_product_detail_price
• before_product_detail_add_to_cart
• after_product_detail_add_to_cart

• before_product_detail_price

• after_product_detail_price

• before_product_detail_add_to_cart

• after_product_detail_add_to_cart

• after_product_description

Cart Page Slots

• before_line_items

• before_line_item

The key prop must be set to the line item's ID for each component.

export function App(nube: NubeSDK) {
  nube.render("before_line_item", (state) => {
    return state.cart.items.map((item) => <Text key={item.id}>Content</Text>);
  });
}

• after_cart_summary

• after_go_to_checkout

Examples

Adding Content to Product Page

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

export function App(nube: NubeSDK) {
  nube.render("after_product_detail_name", [
    <Box key="product-badge">
      <Text>Free Shipping Available!</Text>
    </Box>,
  ]);
}

Adding Content Before Add to Cart

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

export function App(nube: NubeSDK) {
  nube.render("before_product_detail_add_to_cart", [
    <Box key="size-guide">
      <Text>View Size Guide</Text>
    </Box>,
  ]);
}

Adding Content to Cart Page

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

export function App(nube: NubeSDK) {
  nube.render("after_cart_summary", [
    <Box key="cart-promo">
      <Text>Add $50 more for free shipping!</Text>
    </Box>,
  ]);
}

Dynamic Product Grid Rendering

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

const StyledText = styled(Text)`
  color: red;
  font-weight: bold;
`;

export function App(nube: NubeSDK) {
  const state = nube.getState();

  if (state.location.page.type === "home") {
    const sections = state.location.page.data?.sections || [];
    const allProducts = sections.reduce((acc: ProductDetails[], section) => {
      if (section?.products && Array.isArray(section.products)) {
        acc.push(...section.products);
      }
      return acc;
    }, []);

    nube.render("product_grid_item_image_top_left", () => {
      return allProducts.map((product) => (
        <StyledText key={product.id}>ID: {product.id.toString()}</StyledText>
      ));
    });
  }
}

This is a Dynamic Product Grid Rendering example that displays a styled badge on the top-left corner of each product image in the home page grid.

const sections = state.location.page.data?.sections || [];
const allProducts = sections.reduce((acc: ProductDetails[], section) => {
  if (section?.products && Array.isArray(section.products)) {
    acc.push(...section.products);
  }
  return acc;
}, []);

The previous code flattens all products from all sections into a single array.

nube.render("product_grid_item_image_top_left", () => {
  return allProducts.map((product) => (
    <StyledText key={product.id}>ID: {product.id.toString()}</StyledText>
  ));
});

Then, to understand the slot rendering, key={product.id} is required. Links each rendered element to its corresponding product card.

Deprecated Slot Aliases

Some slot names have been renamed for consistency. The old names still work — the SDK automatically redirects them to the new name at runtime — but they are deprecated and may be removed in a future major version.

danger

We recommend updating your code to use the new slot names as soon as possible. The deprecated aliases will continue to work for now, but they may stop working in a future release.

Deprecated name	Use instead
before_price_pdp	before_product_detail_price
after_price_pdp	after_product_detail_price
before_add_to_cart_pdp	before_product_detail_add_to_cart
after_add_to_cart_pdp	after_product_detail_add_to_cart
cart_line_item_top	before_line_item
before_start_checkout_button	before_go_to_checkout

If your app uses both the deprecated name and the new name for the same slot, the new name takes precedence and the deprecated entry is ignored.

Best Practices

• Always use the product's ID as the key prop when rendering in product grid slots
• Test your components with the Patagonia theme to ensure compatibility
• Consider the visual impact of your components on the storefront design
• Use responsive design principles for components that appear on different screen sizes
• Clear slots when they're no longer needed using nube.clearSlot()