Skip to main content

Develop with Headless Turbo Theme

The Headless Turbo theme follows the same storefront development approach as Turbo Theme. Developers use the same React pages, sections, components, layouts, FPI patterns, GraphQL queries, styling, and locales.

Refer to Theme Development and Theme Best Practices for shared implementation guidance. The Headless Turbo theme-specific development work is local configuration and the independent application runtime.

Develop Storefront Features​

  • Add route-level experiences in theme/pages/ and theme/routes.jsx.
  • Build reusable merchandising content in theme/sections/.
  • Share UI and interaction logic through theme/components/.
  • Keep GraphQL operations in theme/queries/.
  • Keep common business logic in theme/helper/.
  • Add translations and schemas under theme/locales/.

Run the development command for your selected package manager while making changes. Webpack provides hot module replacement through the Fastify development URL.

Configure the Storefront​

The Headless Turbo theme does not read configuration from Fynd Theme Editor.

  1. Open theme/config/settings_data.json.
  2. Find the active mode referenced by the current field.
  3. Update values under global_config.
  4. Update page-specific section settings under the mode's page array.
  5. Use theme/config/settings_schema.json to identify supported settings and types.
  6. Restart development when a configuration change is not reflected.

The available settings cover typography, header layouts, cart behavior, product cards, images, sale badges, and delivery-promise display.

Validate Changes​

Before deployment:

  • Run linting and create a production build.
  • Test home, PLP, PDP, search, cart, login, checkout, account, and order flows.
  • Test responsive layouts and keyboard navigation.
  • Verify the correct sales channel is used.
  • Confirm client-side routes work after direct browser navigation.
  • Check that sensitive values are not included in the Webpack bundle.

Prepare a Production Build​

Create and run a production build:

# npm
npm run build
npm start

# pnpm
pnpm build
pnpm start

The commands above are equivalent examples. Use the package manager selected during setup.

Open http://localhost:8080 and repeat critical storefront tests against the optimized build. The compiled assets are written to dist/.

Continue with Deployment after the production build passes validation.

Continue to Deployment​