This guide is for both frontend and backend developers. A mutual understanding of both domains is essential for effective collaboration and a cohesive view of the platform's architecture.
Understand commercetools Frontend foundations
Understand commercetools Frontend
Understand the architecture
Learn core development concepts
- Main development concepts
- Frontend components overview
- Extensions overview
- The Frontend application context
- Commerce types
Get started with Frontend Studio
Set up a project and apply best practices
Set up a local development environment
Use the commercetools Frontend CLI
Set up a project locally
Manage project configuration
Build the frontend with components
Use components in the Studio
- Components in the Studio
- Component settings in the Studio
- Component groups in the Studio
- The component group builder in the Studio
Manage pages in the Studio
- Site builder overview
- The page builder
- Page folders
- Page versions
- Duplicate page versions or edit a live page version
- Schedule page versions
- Schedule navigation changes
- Page templates
- Create anchor points
- Redirects
Design Frontend components
Create Frontend components
- Frontend components overview
- Work with environments as a developer
- Create a Frontend component
- Create a configurable Frontend component
- Project and page folder schemas in the Studio
- Use the schema builder in the Studio
- Create a schema (for components, extensions, and configuration)
- Create a full viewport component
- Create a redirect component
- Read page folder configuration in Frontend components
- Work with links
Integrate and update Frontend components
- Add a Frontend component schema in the Studio
- Update a Frontend component schema in code
- Rename a Frontend component field
Manage media and internationalization
Use collaboration features
Develop backend extensions
Understand extensions
Develop data source extensions
- Develop a data source extension
- Create a Frontend component with a data source
- Read page folder configuration in data sources
- Dynamic configuration from the browser when requesting a data source
- Dynamic filters for data sources and dynamic pages
Manage data sources in the Studio
Use dynamic pages
- Dynamic pages overview
- Dynamic pages in the Studio
- Dynamic pages in the developer area in the Studio
Develop dynamic page extensions
Build action extensions
Use a session
Use Frontend APIs and the SDK
Understand and use the Frontend SDK
Use SDK integrations and the event engine
Understand and use the Frontend APIs
Deploy your project and go live
Understand deployment workflows
Deploy your project
Complete pre-go-live checks and administrator tasks
Use store launchpads
Understand store launchpads
- Store launchpads overview
- Best practices for launchpad accessibility
- Best practices for launchpad performance
Use the B2C store launchpad
- Store Launchpad for B2C Retail overview
- B2C sample data
- B2C launchpad - Composable Commerce functionalities
- B2C launchpad - testing
- B2C launchpad - checkout
Use the B2B store launchpad
Troubleshoot and debug
Migrate your project
Migrate the Frontend SDK
- Frontend SDK version 1 overview
- Version 1 of the Frontend SDK
- Develop integrations for version 1 of the Frontend SDK
- Migrate the B2C store launchpad to version 2 of the Frontend SDK
- Migrate the B2B store launchpad to version 2 of the Frontend SDK