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
before_quick_buy_add_to_cart	home, category, search
after_product_grid_item_name	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_start_checkout_button	home, product, category, search
after_product_detail_name	product
before_price_pdp	product
before_product_detail_add_to_cart	product
before_add_to_cart_pdp	product
after_product_detail_add_to_cart	product
after_add_to_cart_pdp	product
after_product_description	product
before_line_items	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

• before_start_checkout_button

• 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
• after_product_grid_item_name

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.

The example below renders a button on every product card in the grid:

nube.render("product_grid_item_image_bottom_right", ({ location }) => {
  return location.page.products.map(product => (
    <Box key={product.id}>
      <Button onClick={() => console.log(product)}>
        Click Me!
      </Button>
    </Box>
  ));
});

Product Page Slots

• after_product_detail_name
• before_product_add_to_cart
• after_product_add_to_cart

• before_price_pdp

• after_price_pdp

• before_add_to_cart_pdp

• after_add_to_cart_pdp

• after_product_description

Cart Page Slots

• before_line_items

• 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_add_to_cart_pdp", [
    <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 type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Box, Text } from "@tiendanube/nube-sdk-jsx";

export function App(nube: NubeSDK) {
  nube.render("after_product_grid_item_name", ({ location }) => {
    return location.page.products.map(product => (
      <Box key={product.id}>
        <Text>{product.variants.length} variants available</Text>
      </Box>
    ));
  });
}

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()