Where to change the storefront
Architecture is how one deployment is wired. Development path grades an optional code change: storefront chrome, a page, or the Amplify backend. The store runs without any of those. This page is the file map for someone who can already run the store and is about to edit the source.
A storefront page is a route file. Work that the admin can finish is named in the table below. The steps for that work stay in System and global settings, Catalog and products, and Storefront locales.
Three names in the source
The repository uses three different names where a theme picker would use one.
| Name | Where | What it controls |
|---|---|---|
| Import theme id | officialImportTheme in src/config/site.config.ts. The kit ships with nordic. | Checks theme inside each pack's official-pack.json. A pack with a different id is rejected. The skin CSS stays the stylesheet the layout already imports. |
| Logo and favicon | Paths in src/config/themeAssets.ts. The files are in public/frontend/{theme}/other/. | Default logo and favicon only. Site Settings can replace them. The homepage carousel, feature banners, inner-page hero, footer band, mobile menu image, and why-choose rows are banners in the admin. Product photos are separate. |
| Skin CSS | src/styles/frontend/default/inkflow/, imported from src/app/[locale]/layout.tsx. FrontendShell sets data-theme="inkflow". | Color, spacing, and component styles. Start with the variables on .frontend-layout[data-theme="inkflow"] in globals.css. |
Product photos are uploaded in the admin or carried in an import pack. They land in S3 under admin-pictures/. They are separate from public/frontend/.
How a page is reached
One URL is one route. src/app/[locale]/<segment>/page.tsx is served at /{locale}/<segment>. The homepage is src/app/[locale]/page.tsx.
That homepage file assembles the sections. The carousel, the feature banners, and the why-choose band read banner rows from the admin. The product shelves read the catalog. An inner page keeps its own title. The hero background, the tagline, and the footer band come from the page-layout banners.
Navigation and the footer live outside the page files. src/app/[locale]/layout.tsx wraps the storefront in FrontendShell. /admin stays outside that shell. /setup receives the theme and no navigation. A new page placed under [locale] already includes the shell.
The words on navigation, buttons, and checkout labels are JSON under src/i18n/locales/frontend/ (default/shop/ for the storefront, default/bill/ for checkout). Product names, categories, and blog posts are the fields you edit in the admin or in an import pack.
What to edit
Saving in the admin takes effect on the running store. A change to a file in the repository has to be pushed, and that Amplify build has to finish.
| What you want to change | Layer | Redeploy |
|---|---|---|
| Store name, Site URL, sender, SMTP, payment switches, currency, language switches, homepage carousel, feature banners, page layout | Admin. The carousel, feature banners, and page layout are under Content. The rest is under System. See System and global settings and Catalog and products. | No |
| Import theme id, installed languages, and the address used when Site URL is empty | url, locales, and officialImportTheme in src/config/site.config.ts | Yes |
| Default logo and favicon | src/config/themeAssets.ts and public/frontend/{theme}/other/ | Yes |
| Navigation and button copy | src/i18n/locales/frontend/ | Yes |
| Color and spacing | src/styles/frontend/default/inkflow/ (start with globals.css) | Yes |
| Homepage sections, or a new marketing page | src/app/[locale]/page.tsx, or a new src/app/[locale]/<segment>/page.tsx | Yes |
| Header and footer links | src/components/user/SiteNavigation.tsx and src/components/user/SiteFooter.tsx | Yes |
| Checkout, order settlement, webhook paths, Amplify schema | Leave these in place. Checkout and orders already ship in the kit. Read Architecture before changing how checkout is wired, and the data model that ships in the source at docs/reference/data-model.md before changing the schema. | — |
Replacing the logo file in the repository is the logo row, and that build has to finish. Replacing a carousel slide, feature banner, hero, footer band, mobile menu image, or why-choose image is the admin row: save it, and this build can stay as it is. Changing the words in the navigation is the JSON row. Adding a marketing page is the new page.tsx row.