The Commerce Partnership commercetools Starter

This lightweight starter integrates Sanity’s Headless CMS with a SvelteKit storefront backed by commercetools.

It includes:

• A commercetools based SvelteKit starter site with Visual Editing.
• A page builder supporting grids, containers and components.
• A page hierarchy to structure pages.

Page Builder

For our use case of building a commercetools site, we needed more than just a list of components for our page builder

We support a Grid (implemented as a Tailwind grid) and a Container (Tailwind flexbox) to contain components. This allows building pages with responsive layouts, where components can be side-by-side on larger screens, but vertically stacked on smaller screens.

We also support a number of layout settings: Padding, Gap, Max Width etc. These support values such as Small, Medium and Large so they are not directly tied to the implementation. The page builder in Sanity is not directly tied to HTML and CSS so it can be used for building pages on other platforms such as native mobile apps.

The settings can be defined at different screen widths (again defined as Small, Medium and Large) to allow for responsive layouts.

Pre-built components support requesting data from commercetools. This allows presenting dynamic data in the ecommerce store. For example, we have a Product Slider component that displays products from a commercetools category. In Sanity, the editor enters the category slug and number of products to display.

Components can be developed to be as granular or macro as is required to suit the client. For example, the product page can be built using a single Product Detail component or it can be broken down into Product Image Gallery, Product Detail Info, Product Add To Cart and Product Additional Details.

commercetools site with Visual Editing

By leveraging Sanity’s Visual Editing and real-time preview mode, content editors can assemble predefined components (tied to commercetools APIs) in a visual interface, then see changes immediately before publishing. SvelteKit’s server-side rendering, combined with commercetools’ flexible APIs, ensures a performant and composable setup that’s ready to evolve alongside project requirements. In practice, this starter simplifies collaboration between developers and content teams, speeding up both initial deployment and ongoing updates.

We support the use of dynamic commercetools data. For example, in the Product Slider component you can change the category slug and see the data in the slider change in real-time.

Page Hierarchy

For the page hierarchy, we reviewed the hierarchical-document-list plugin, but this is live-edited so you can’t test out changes before making them live, so this was not suitable for our use case. Instead we built a custom component using the hierarchical-document-list plugin as an example.

We use the same model with a single document for the hierarchy, but we support publishing the document. The UI uses dnd-kit for the drag and drop.