Frontend Studio Releases

The Media area now provides an improved user experience to search and manage the media items of your website more easily.
Additionally, a new error message warns you about mismatches on frontend and backend deployments.

As announced, you can now use a Git hosting service of your choice for the repository of your commercetools Frontend project. To support this feature, the Studio underwent the following changes:

• Added the API Keys area, where you can manage your API keys.
• The Continuous Integration area now support builds from custom CI environments.

We fixed two bugs on the Page folders list in the Site builder area.
When scrolling the list, it scrolled endlessly and displayed wrongly. Additionally, the list loaded incorrectly if it contained many page folders. Both scrolling and loading now work as expected.

You can now create new page folders and page versions using dedicated buttons, New page folder and New page version, in the new Site builder area. This update simplifies the user experience for creating new page folders and page versions, compared to the previous design.

We fixed a bug in the availability of new schemas. When creating or uploading a schema from the Studio and then using it right after, you needed to refresh the page in your browser to make the schema available.
For example, when you were creating a schema for a Frontend component and then wanted to add the component to a page version right away, you needed to refresh the page builder page in your browser. Or, if you uploaded a schema of a dynamic page, the dynamic page would not appear in the Dynamic pages area and you had to refresh the browser page for it to be available.
Now, schemas are available immediately after creation without having to refresh the browser.

From the new Studio navigation menu, you can access the Support Portal and documentation. You can also expand or collapse the navigation menu with the expander arrow.

We fixed a bug in the update process of component groups.
When you edit a component group, it will be updated on all page versions where it is used. Earlier, the update process followed the page folders order. This caused page versions that were not in a live status to be updated before page versions that were live, and the process could take longer than expected. Now, live page versions are updated before others, thus ensuring that the changes to the component group are displayed on your live website in a short time.

Additionally, it is now easier to identify the selected data source filter thanks to the new border color.

You can now collaborate with teammates by commenting on page versions, component groups, and page templates. You can also tag users in comments and assign them to review page versions.

In addition, you will also receive notifications regarding updates to pages that you follow. To learn more about comments, notifications, and reviews, see Collaboration.

As announced, commercetools Frontend now has a multi-tenant backend architecture. The Studio underwent the following changes to support the new architecture:

• Sandboxes is no longer available in the Developer area.
• From Deployment in the Developer area, you can now deploy the frontend and backend of your website at the same time.
• Using the Project schema and the Project area, you can now manage additional project configurations, such as API credentials.

Our documentation is updated to reflect the changes.

From the Components area, you can now upload multiple Frontend component schemas files at the same time.

To upload multiple files, select them from your computer and drag them to the page. After uploading the files, you can edit, validate, and publish the schemas one after another in the schema editor.

This speeds up and facilitates the process to create Frontend components.

You can now see the preview of data fetched from a data source when setting the data source's filters. The preview is available both in the Frontend component's settings and in the data source filter editor.

With this preview, you can see the data retrieved from a data source according to the filters you set, without having to check the preview of the entire page.

To activate the preview, you must add preview data for the Studio.

As of today, you can monitor the commercetools Frontend system status and metrics from the general commercetools system status page. This will allow you check the status of commercetools Frontend and Composable Commerce at a glance from the same place, instead of from two different pages.

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.

Protecting your privacy is crucial for our business, and we're committed to being a responsible, trustworthy custodian of our personal information. For this reason, we've added cookie consent to the Studio.

We're asking for cookie consent mainly for two tools: FullStory and UserGuiding.

FullStory allows us to understand how you’re using the Studio. We don't gather personal information. We only collect usage information to understand how to improve our product and deliver the best user experience.

UserGuiding allows us to create in-app notifications about the latest releases, create tutorials on using those features, and help onboard new users. We don't gather personal information, and it's only to deliver information about the Studio to you.

Cookie settings are of two types:

• Strictly necessary: Enables UserGuiding, but FullStory stays turned off.

• Performance: Enables both UserGuiding and FullStory.

To change your cookie settings, reactivate the cookie consent banner by clearing the cookies from your browser settings. Then, select your preference using the cookie consent banner.

You can find our privacy notice for the Studio below.

You can now turn an existing page version into a page template. You can do it from the Site builder area and from the page builder while editing the page version.

After creating the page template, you can edit it in the Templates area.

This way, if you create a page version that can be reused in your commercetools Frontend project, you can easily make it a template.

In the Site builder, you can now duplicate a page folder keeping its settings and the associated page versions.

Previously, to make a copy of a page folder, you had to manually create a page folder and configure it with the same settings and page versions as the page folder you wanted to copy.

From the Redirects area you can now upload a CSV file containing multiple redirects to be added to your commercetools Frontend project.

Before, the commercetools Frontend support team was in charge of importing bulk redirects, now you can do it autonomously. This speeds up the migration process to commercetools Frontend.

In the Site builder, you can now set the page version locale by selecting it from a drop-down menu when creating, editing, or duplicating a page version.

In the page builder, you can now move between page versions using the page versions drop-down.

Apart from the above feature, here are other two enhancements coming with this release:

• The sandbox debugging modal is now consistent with the Studio design system. The transient sandboxes will appear grayed out while they're unusable.
• You'll now see the information about each role in the invitation drop-down when inviting a user to the Studio. This will help you decide which role to assign to your new user.

You can now duplicate, schedule, and publish page versions from the page builder. Read more about actions in our page builder documentation.

Apart from the above feature, here are some other enhancements coming with this release:

• Clicking on Save or Publish in the page builder will keep you in the page builder. You can save your changes and complete other actions without leaving the site builder.
• You can now access the Merchant Center login page by clicking on the profile icon and selecting Merchant Center.
• You'll see an information notification within the preview of a component schema to clarify the correct usage.
• You can now duplicate the component setting inputs of a group type field.
• The color of primary buttons is now updated to commercetools brand green.
• All documentation links now point to the commercetools Frontend documentation website.

Bug fixes

• We fixed a bug on translatable fields containing links. If the field was within a group and was not the first field, the link was not saved.
• We fixed a bug on the schema editor buttons that were displayed incorrectly on small screens.

As you already know, commercetools acquired Frontastic in November 2021. As a step towards the post merger integration, we've rebranded the Frontastic Next.js offering as commercetools Frontend.

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