The same SDK file can be a page section, a nested block, or a part that restyles a built-in shell. The editor file tree under Website editor → Site code lists all three.
A block sits inside a section slot. Mark it with inline: true and category: "Blocks". Leave off the sec-section wrapper so it flows with the surrounding copy.
import { defineSection, fields } from "@lockii/site-sdk";
export default defineSection({
id: "custom.starter",
label: "Note",
category: "Blocks",
inline: true,
fields: {
text: fields.text({ label: "Text", ai: { rewrite: true } }),
},
defaults: {
text: "A short note for customers.",
},
render: ({ text }) => (
<p className="sui-text" style={{ color: "var(--site-paragraph)" }}>
{text}
</p>
),
});Add a block from the block picker inside a section that has a content slot. Generate is on that picker as well.
A part replaces the inside of a shell. Lockii still owns the portal, focus, checkout, and calendar. Your file arranges SDK components and copy.
| Target | You arrange | Lockii still owns |
|---|---|---|
cart.drawer |
Title, filters, line items, empty state, footer | Portal, focus, close, checkout math |
booking.date_trigger |
Label and hint inside the date button | Open, close, and the click target |
booking.date_panel |
Heading and hint above the calendar | Calendar, range checks, and Done |
header.menu |
Title, nav links, footer action | Sheet, backdrop, and dismiss |
header.chrome |
Brand, nav, search, account, and cart | Placement on every page |
footer.chrome |
Columns, links, and legal copy | Placement on every page |
product.card |
Photo, name, price, and call to action | Product data and booking |
search.overlay |
How matches and the empty state render | Dialog, input, and keyboard |
location.picker |
How each location row renders | Overlay, selection, and GPS |
Open the part from Website editor → Site code. Each target has a starter file.
A product card part reads the current product with useCardProduct() and can still render SiteProductCard, or lay out SiteHeading, SiteText, and SiteButton around that product.
const product = useCardProduct();A cart part composes CartTitle, CartLineItems, CartSubtotal, and CartCheckoutButton, or uses CartDrawerContents for the default order.
A header part renders SiteHeaderLayout. A menu part renders SiteNavLinks or SiteMenuContents.
Theme settings and the built-in section catalog cover layout, color, type, and card style. Write a section, block, or part when that catalog cannot express the layout. Duplicate an existing section when you want its structure as the start, then change the source.