Custom website code imports @lockii/site-sdk. That package is the Lockii Site SDK: the components, fields, and catalog hooks you use when a section, block, or overlay is written as code.
Open it from Website editor → Site code, or add a section and choose Custom section. The file default-exports defineSection. The editor compiles it, shows a preview, and stores it on the site. The page stays unpublished until you publish it.
A section is a full-width region on a page. Set category to Custom.
A block is a small piece dropped inside another section. Set inline to true and category to Blocks.
A part replaces one built-in shell: the cart drawer, date picker, header, footer, product card, search results, or location list. The shell still owns checkout, the calendar, and focus. Your file arranges the pieces inside it.
Import react and names from @lockii/site-sdk. Site code lists every name the compiler accepts, grouped into Components, Hooks, and Helpers.
import { defineSection, fields, SiteContainer, SiteHeading } from "@lockii/site-sdk";The compiler accepts those imports. It rejects other packages, fetch, eval, and reads of window, document, localStorage, or navigator. It also rejects raw tags that leave the theme, including a, form, input, script, style, iframe, and svg. Buttons go through SiteButton so the destination stays a site action.
defineSection and fields put copy, images, and buttons in the sidebar so a merchant can change them without editing the file.
Components such as SiteHeading, SiteButton, SiteProductCard, and SiteContainer follow the site theme.
Hooks such as useProducts, useLocations, and useSite read the live catalog, the open page, and the company.
Colors come from the theme. Use var(--site-heading), var(--site-paragraph), var(--site-accent), and the other --site-* variables. A hex color in the source fails the compile.