Product page slots

Use these slots when you want a badge, size-guide link, delivery note or promo around a product's details, under the add-to-cart form, or around the related-products slider, without forking the page. New to slots? Read Slots and Page frame slots first. The route itself is documented in Product.

LayoutCopy Anchor Link

SlotsCopy Anchor Link

The three product:single.description* slots render once each and pass { product }: .start and .description from the product details, .end from the page itself. Keep an if (!product) return null; guard if you also render one of these names somewhere else.

All the other slots on this page pass no context, so read the product yourself if you need it, for example with useProduct.

Two things to know:

• The related-products slider and the reviews block render only when scrolled into view, but the slots around them always render.
• The product reviews block appears only when the store has product ratings turned on. product:related.start renders either way.

Example: a size-guide link in the descriptionCopy Anchor Link

import { hookRegistry, HookName, type HookContext } from '@salla.sa/twilight-theme-engine/hooks';
import type { Product } from '@salla.sa/twilight-theme-engine/types';

export function registerThemeHooks() {
  hookRegistry.register(
    HookName.PRODUCT_DESCRIPTION,
    (context: HookContext) => {
      const { product } = context as { product?: Product };
      if (!product) return null;
      return (
        <a className="mb-4 block text-sm text-primary underline" href="/size-guide">
          Size guide for {product.name}
        </a>
      );
    },
    50
  );
}

Call registerThemeHooks() once at module scope, as in Add content to a slot.

Example: trust badges under the add-to-cart formCopy Anchor Link

import { useHook } from '@salla.sa/twilight-theme-engine/hooks/useHook';

export function TrustBadges() {
  useHook('product:single.form.end', () => (
    <ul className="mt-4 flex gap-4 text-xs text-gray-500">
      <li>Secure payment</li>
      <li>Free returns</li>
      <li>Ships in 2 days</li>
    </ul>
  ));
  return null;
}

Render <TrustBadges /> once under your layout and keep it mounted, so the handler stays registered for the whole visit.

NextCopy Anchor Link

• Cart and checkout slots
• Home and catalog slots
• useHook and HookSlot