Building blocks

How the SHOPin storefront accelerator organises storefront UI, shared constants, contracts, and translations—and where to add code so boundaries stay clear.

In this section

• Feature — features/ layout, import boundaries, links to BFF and contracts.
• Component — components/ui, components/layout, Storybook, tokens, tests, imports.
• Icons — public/icons/ SVGs, a11y, imports, Storybook parity.
• Translations — @core/i18n, @config/constants locales, BFF i18n.service, next-intl.
• Config & constants — @config/constants, index.ts exports, vs @core/contracts.
• Maintain contracts — @core/contracts, Zod, domains, check-types.

Back to How to work with SHOPin