Frontend Development Releases

We have deprecated and replaced the public repositories for store launchpads to help users easily track our updates. The following key changes have been introduced:

• Individual public libraries (such as FrontasticGmbH/components and FrontasticGmbH/extension-commercetools) will be discontinued.
• All new features and fixes will now be exclusively available in the following repositories:
  • B2B
  • B2C
• Existing individual public libraries will be archived with a redirect to the new scaffolding repositories.

• Replaced the node-fetch package with the Node.js fetch API, reducing the number of package imports.
• Standardized API creation across the codebase by using dedicated API factory functions. This helps ensure a consistent approach to creating APIs throughout the project.
• Added the checkout callback URL to project configuration in the Studio for easier management.

• Improved the address component by implementing separate Street Number and Street Name fields.
• Replaced the node-fetch package with the Node.js fetch API, reducing the number of package imports.
• Standardized API creation across the codebase by using dedicated API factory functions. This helps ensure a consistent approach to creating APIs throughout the project.
• Added the checkout callback URL to project configuration in the Studio for easier management.

• Added an error message to notify customers when a Quote request can't be processed because it contains items with insufficient stock.
• Fixed a styling issue where the border of the search bar did not extend to its full width.

• Deprecated support for Node.js versions earlier than 20 in backend extensions.

• Implemented a solution to display the SEO metadata for products and collections for dynamic pages.
• Improved the UI for when an out-of-stock item is in the cart to prompt the customer to remove it before they can complete the checkout.
• Updated the colors and hover behavior on the navigation UI to improve its accessibility.
• Replaced the Colour and Finish attributes in the Merchant Center with six new attributes for greater flexibility in defining how colors are formatted in the sample data and rendered on the frontend:
  • Search Colour: sets the color used for filtering on product listing pages, for example, Blue.
  • Specific Colour: sets a specific shade of a color on the product details pages, for example, Sky blue.
  • Colour Code: sets the hex code of the color swatch displayed on the product details pages, for example, #87CEEB.
  • Search Finish: sets the finish used for filtering on product listing pages, for example, Glass.
  • Specific Finish: sets a specific type of finish on the product details pages, for example, Frosted glass.
  • Finish Colour Code: sets the hex code of the color swatch of the finish displayed on the product details pages, for example, #87CEEB.

• Implemented a solution to display the SEO metadata for products and collections for dynamic pages.
• Updated the UI to improve clarity by deactivating buttons and toggles on an Approval Rule if an associate doesn't have the necessary permissions to edit it.

• Fixed an issue where text was not automatically translated to the relevant language when the locale was changed.

• Added support for multiple Customer Groups and mapped them to the backend extensions.
• Enhanced the Payment Only checkout by deactivating the complete purchase button if an item is out of stock. Additionally, we improved the error message displayed for out-of-stock items.

• Fixed a bug where the breadcrumb on the product details page (PDP) was displayed in English and included an additional / in the German locale.

We updated the linter warnings to help ensure code quality, maintainability, and to improve the developer experience.

• Updated the linter warnings to help ensure code quality, maintainability, and to improve the developer experience.
• Added an option in the Studio to let you update the URL of the Thank you page customers receive after checking out. Previously, this was set by an environment variable. To update the URL in the Studio, open the Site builder, select the page version to edit, open the Checkout component, and go to the Redirect URL after Checkout section. The default value is set to /thank-you.

• Fixed the color picker for variants so that all available colors now render as expected.
• Resolved a bug where the cart icon was still showing that items were in the cart after the checkout had been completed.
• Improved accessibility by fixing WCAG violations on the Company Admin and Purchase Lists sections of the Dashboard.

• We now use React-Hook-Form with Zod to manage forms and improve validation for accessibility.
• We updated the Product details page UI to display relevant Shipping Methods. Support for postcode-based search has been removed.
• We migrated the backend extensions from using the sdk-client-v2 to the sdk-client-v3 of the TypeScript SDK. This improves performance and lets you use the latest SDK capabilities with the extensions.

• Fixed an issue where pressing the Enter key on the login page redirected users to the password reset page instead of logging them in.

• Added support for Associate Shopping Lists. On the Purchase Lists page, Associates can now view, create, update, and delete Shopping Lists on behalf of a Business Unit. Available actions depend on the Associate’s roles and permissions within the Business Unit.

• We migrated the backend extensions from using the sdk-client-v2 to the sdk-client-v3 of the TypeScript SDK. This improves performance and lets you use the latest SDK capabilities with the extensions.
• We now use React-Hook-Form with Zod to manage forms and improve validation for accessibility.
• We enhanced the queryWishlists function which now displays the creator’s details for each wishlist.

• Fixed an issue where associates in the same Business Unit could not view each other’s wishlists, even when permissions were correctly configured.

• Added support for Node.js 24 in backend extensions.
• Added a warning message that displays when a project uses an outdated Node.js version in backend extensions. We will deprecate Node.js versions 20 and earlier on 1 July 2025.

We will support Node.js versions according to the following calendar:

• 19 May 2025: Node.js version 24 is supported.
• 1 July 2025: All Node.js versions earlier than 20 are deprecated and are no longer supported.
• 30 April 2026: Node.js version 20 is deprecated and is no longer supported.

We recommend that you always migrate your project to the latest version to access the updated Node.js features and enhancements.

• Introduced Payment Only mode in the Store Launchpad for B2C Retail, allowing you to choose between Complete Checkout mode or Payment Only modes on your store launchpad.
• Added support for saving customer addresses in the My Account area when using Payment Only mode.

• Introduced a responsive banner component for the product listing and product details pages. This component replaces the hero component and helps improve layout and performance across devices.

• Added support for dynamic filters on dynamic pages, which allows you to create dynamic page rules in the Studio for the Store Launchpad for B2B Manufacturing. Use these rules to display banners or custom content on product and product listing pages more efficiently.
• Introduced a responsive banner component for the product listing page and product details page. This component replaces the hero component and helps improve layout and performance across devices.
• Added tabs for active and inactive rules on the Approval Rules page.

• Added accessibility best practices to the Storybook for the Store Launchpad for B2C Retail.

• Resolved a bug that caused a gray overlay to cover the whole page after clicking on the search bar.
• Fixed an issue where the alt-text provided for images in the Studio was not rendering on the frontend as expected.

• On the Orders page, you can now fully navigate the Creation date menu using a keyboard, improving accessibility.
• Added accessibility best practices to the Storybook for the Store Launchpad for B2B Manufacturing.
• Added support for retrieving the permissions of an Associate within a Business Unit using a single query. Previously, multiple queries were required to achieve the same result.

• Fixed the padding on the product details page. Previously, there was excessive padding between the product carousel and the product details.
• Resolved an issue that added an unnecessary slug to the URL when clicking on a product in the cart.
• Fixed an issue where the alt-text provided for images in the Studio was not rendering on the frontend as expected.

The store launchpad codebases target Web Content Accessibility Guidelines (WCAG) 2.2 level AA as their foundation for web and digital accessibility.

• Updated Next.js to version 15.2.4, which includes a critical security patch. Additionally, we updated ESLint to version 9.22.0, TypeScript to version 5.8.2, and typescript-eslint to version 8.28.0, improving languages support and code quality.
• Added support for using dynamic filters on dynamic pages, which means you can now create dynamic page rules in the Studio for the Store Launchpad for B2C Retail. This lets you manage dynamic pages more effectively by using rules to display banners or other custom content on product and product listing pages.
• Removed the Typography component and replaced it with standard HTML elements that use the next-intl translation functions.
• Optimized the Hero component to improve Largest Contentful Paint (LCP), reducing loading times. To give you greater control over image quality and loading times, we've also added the following to the Site builder > Page versions area of the Studio:
  • An Image loading priority checkbox that lets you prioritize loading the Hero tastic above all else on the page.
  • An Image quality setting that lets you set the quality percentage you want to assign to images.
• Implemented and refined Accessible Rich Internet Applications (ARIA) labels and roles on components to enhance the accessibility of the store launchpad.

• Updated Next.js to version 15.2.4, which includes a critical security patch. Additionally, we updated ESLint to version 9.22.0, TypeScript to version 5.8.2, and typescript-eslint to version 8.28.0, improving languages support and code quality.
• Removed the Typography component and replaced it with standard HTML elements that use the next-intl translation functions.
• Optimized the Hero component to improve Largest Contentful Paint (LCP), reducing loading times. To give you greater control over image quality and loading times, we've also added the following to the Site builder > Page versions area of the Studio:
  • An Image loading priority checkbox that lets you prioritize loading the Hero tastic above all else on the page.
  • An Image quality setting that lets you set the quality percentage you want to assign to images.
• Simplified the UI for creating Approval Rules and for adding approvers, which improves clarity and the user experience.

• Ensured that the Product selection is correctly included in the session when a customer logs in, so that the correct Products return when queried.
• Fixed an issue that caused errors when trying to add a Product variant to the cart, which was due to incorrect filtering of variants.

• The orderNumber is now automatically set when the Checkout session is created. Previously, the setOrderNumber update action was automatically applied to set the orderNumber.
• Added an error page that directs users back to the home page when a page is not found.
• Mapped the meta data for Products and Categories in extensions.
• Switched to Next Cloudinary's CldImage component for content management system (CMS) images. We also implemented Next.js and Netlify content delivery network (CDN) caching to optimize image delivery, support responsive sizing, and improve overall image performance.
• Updated headings for better clarity and organized them in the correct order, improving the accessibility of the store launchpad.
• Restructured the translation system into a nested format using next-intl, which enables better Next.js integration. Previously, we used separate files for each category in language-specific folders; for example, /translations/de-de/account.json. Now, all translations are consolidated into a single file with a nested object structure; for example, /messages/de.json. An example of the new file structure is as follows:

• Fixed an issue where Germany was set as the default location, causing the language to display as the country in the Select your country dropdown.

• The orderNumber is now automatically set when the Checkout session is created. Previously, the setOrderNumber update action was automatically applied to set the orderNumber.
• Mapped the meta data for Products and Categories in extensions.
• Switched to Next Cloudinary's CldImage component for content management system (CMS) images. We also implemented Next.js and Netlify content delivery network (CDN) caching to optimize image delivery, support responsive sizing, and improve overall image performance.
• Restructured the translation system into a nested format using next-intl, which enables better Next.js integration. Previously, we used separate files for each category in language-specific folders; for example, /translations/de-de/account.json. Now, all translations are consolidated into a single file with a nested object structure; for example, /messages/de.json. An example of the new file structure is as follows:

• Fixed an issue that prevented business units from updating correctly, resulting in a 404 error when a user tried to view an Approval Flow.

• Updated the store launchpad to let users to navigate the site with a keyboard, making the store launchpad more accessible.
• To be compatible with React version 19, we now pass refs as props instead of using the deprecated forwardRef method.
• Aligned the color scheme across all components to ensure consistency.
• Added form labels to components that had none, improving the accessibility of the store launchpad.
• In the Added to cart modal and the My Cart menu, if you click a product image, you are now redirected to the Product details page (PDP) of the item.
• Updated HeadlessUI to version 2.1.

• To be compatible with React version 19, we now pass refs as props instead of using the deprecated forwardRef method.
• Added form labels to components that had none, making the store launchpad more accessible.
• Updated headings to be semantic and in the correct order, improving the accessibility of the store launchpad.
• In the Cart, you can now click a product image or product title and are redirected to the Product details page (PDP).
• When a customer changes their locale, the page is now refreshed to ensure the data is displaying correctly for that locale.
• Updated HeadlessUI to version 2.1.
• For select and multi-select components, we now use combo boxes instead of list boxes.

• Fixed an issue where two carts were created when a customer changed their locale while they had items in their cart.

• Added support for Customer Groups. Customer Groups can be assigned to Customers to offer them the same prices or promotions.
• All discount types are now supported for use in the store launchpad, including Product Discounts, Cart Discounts, and Discount Codes.
• Updated the slider component for product images on the product detail page (PDP) from a Swiper.js component to a lightweight, custom image viewer that improves page loading speed.

• Implemented and refined Accessible Rich Internet Applications (ARIA) labels and roles to enhance accessibility.
• Added a title element to the store launchpad so that the page title now displays on the browser's title bar or the page's tab.
• Added support for Customer Groups. Customer Groups can be assigned to Customers to offer them the same prices or promotions.
• Improved mobile navigation and usability for data tables through optimized pagination.
• Added a message for users trying to access the Company Admin or Approval Rules pages on mobile devices, informing that these pages are only accessible on desktop.
• Added support for all discount types for use in the store launchpad, including Product Discounts, Cart Discounts, Discount Codes and Direct Discounts.
• Replaced the delivery estimate on the product detail page (PDP) with shipping name and description fields, which means you can add the shipping method name and the description of the shipping method as intended. Previously, the description field was used for a shipping estimate and you couldn't edit it.

• Fixed the alignment on the Orders, Quotes, and Approval Flows tables.

• The CLI internal log now shows when it retries requests after encountering errors while streaming data from backend extensions. This provides greater visibility of errors and ensures you're aware of automatic retry attempts.
• We fixed an issue where multiple backend extension uploads were incorrectly bundled into a single code change. This helps your changes deploy faster.

Node version 18 is still supported but is not recommended. Node versions earlier than 18 will be deprecated in July 2025.

• The new version of the Store Launchpad for B2C Retail now supports Next.js version 15.1.2 and Node.js version 22. We recommend upgrading to these versions. For steps to update your Node version, see the Node migration guide. For steps to upgrade your Next.js version, see the Next.js migration guide.
• On Product listing pages, you can now use the enter and tab keys to interact with filters.

• On Product listing pages, if you change locale you are no longer redirected to a 404 error page. Instead, you are now correctly redirected to the Product listing page for the selected locale.

• The new version of the Store Launchpad for B2B Manufacturing now supports Next.js version 15.1.2 and Node.js version 22. We recommend upgrading to these versions. For steps to update your Node version, see the Node migration guide. For steps to upgrade your Next.js version, see the Next.js migration guide.
• You can now navigate your stores using a keyboard, which improves the accessibility of your site.
• We have improved color contrast levels across the store launchpad for better accessibility.
• We have updated color schemes across the store launchpad to fix inconsistencies and improve accessibility. The store launchpad now uses Tailwind color variables instead of hardcoded colors.
• We have added the accessibility add-on to the Storybook for the Store Launchpad for B2B Manufacturing.

• On the Product details page, we have improved validation to ensure only authorized users can view the relevant pages.
• On Product listing pages, if you change locale you are no longer redirected to a 404 error page. Instead, you are now correctly redirected to the Product listing page for the selected locale.

Node version 18 is still supported but is not recommended. Node versions earlier than 18 will be deprecated in July 2025.

This property lets you set the maximum number of times Studio users can add a component to the same page version or component group. For example, you can use it for a hero component that must appear only once on a page version.

These properties let you determine the possible format and length of the values that Studio users can enter in the relevant fields.

• Country flags are now SVGs instead of icons.
• Additional unit tests are now available for atoms, helpers, and hooks.
• The store launchpad now uses Swiper version 11.1.15.

• An error message no longer appears when a user is successfully registered.

• When inviting an Associate to join a Business Unit, the Business Unit name is now saved as the company name in the Merchant Center.
• Additional unit tests are now available for molecules, atoms, and hooks.

• A message indicating that the email address is not associated with any account now appears during user registration if the backend request is unsuccessful.

For a step-by-step guide about how to update your SDK version, see the following:

• B2C projects migration guide
• B2B projects migration guide

• When the CLI does not detect Yarn, it now provides installation instructions instead of only reporting that Yarn is absent.
• The CLI no longer parses the frontastic binary file as a configuration file when it is present in the execution directory.
• To increase accuracy, the guid validation pattern in the code generator is now stricter.
• Long messages no longer overflow onto the right border of the CLI log view.
• The upload of a backend extension no longer fails on the first invocation of the CLI in a newly cloned repository, which means you no longer need to restart the CLI.

commercetools Frontend SDK underwent changes to improve the developer experience and extensibility of the SDK.

• In certain scenarios, the command attempted to initiate the interactive creation of a configuration file. We have corrected this behavior because the command does not require a configuration file and should operate non-interactively, especially in continuous integration environments.
• Running the command without setting either the clientId or clientSecret environment variables failed and generated an ambiguous error message related to token retrieval from Studio. Now, the error message is clearer and states which variables are missing.

• The CLI no longer requests the frontastic.toml configuration file because the command already receives the configuration parameters. Previously, the CLI requested the file anyway.
• Errors no longer occur when running the CLI as a root user.

• Search listing page
• Product details page
• Checkout page

With these additions, the B2B template provides users with enhanced functionality to create a more seamless shopping experience.

With the extension, you can deliver Bloomreach content to your commercetools Frontend website.

With the extension, you can use discounts, coupon codes, and other promotional marketing features from your Talon.One campaigns.

With the extension, you can deliver product recommendations from Nosto to your commercetools Frontend website.

The main improvements resulting from this new architecture are:

• You will no longer use sandboxes to develop extensions. An environment in a development cluster is created automatically.
• Website latency will decrease since cloud functions run on a cluster close to your customer’s target location.

If your projects are already set up on the new multi-tenant architecture, you do not need to take any actions.

If your projects are set up on the old single-tenant architecture, you need to perform some changes. Please contact your Customer Success Manager for further information.

Our documentation is updated to reflect the changes.

From the commercetools system status page, you can also subscribe to be notified of status updates.

The old commercetools Frontend system status page will no longer be available.

With the extension, you can deliver product recommendations from Dynamic Yield to your commercetools Frontend website.

With the extension, you can deliver Contentstack media content (such as images, videos, and other media assets) to your commercetools Frontend website.

With the extension, you can deliver Amplience media content (such as images, videos, and other media assets) to your commercetools Frontend website.

The Good Store is a frontend template to launch a storefront in a short time. The Good Store frontend components were designed according to research on commerce UX/UI best practices.

You can use The Good Store as a blueprint to build and launch your commerce website with commercetools Frontend and commercetools Composable Commerce, or you can just take it as a reference to develop your commerce website.

• Adyen
• Algolia
• Google Tag Manager
• SendGrid

The commercetools Frontend SDK comes with the following NPM packages:

• @commercetools/frontend-sdk
• @commercetools/frontend-composable-commerce
• @commercetools/frontend-domain-types

The release notes published before 4 November 2022 are archived below.