Documentation

Update website content

commercetools Frontend Studio lets you create new pages, update existing pages, and update the website layout. As an example, you will learn to create a new layout for your home page to advertise a promotional offer. You can apply the concepts shared in this chapter to all pages of your website.

To carry out the tasks described here, you should be familiar with the Site builder area in the Studio by following our Studio documentation.

Create a new home page

Duplicate the existing page version

Duplicating the existing page version is the easiest way to create a new page with a slightly changed layout. To do so, go to the Site builder and duplicate the Home > Live > Default page version using the More icon.

The list of the available page folders with the Home page folder selected and the related page version sections displayed.

Give this new page version a meaningful name, such as Seasonal Promotion. After saving the new page version, the page builder will open, where you can edit the page version's layout.

Edit the new page version layout

To advertise the seasonal promotion and attract customers, you would want to change the image, message, and call to action in the hero banner and display the products included in the promotion in the product slider.

Edit the hero banner

From the HEAD layout section, select the commercetools UI hero Frontend component. To edit the image, expand the Image section and replace the current image with the promotional image.

The Image section in the Component settings pane with the existing image and the related Edit icon displayed

Now, expand the Message section to change the message displayed on the banner. Enter the text you want. For example, SEASONAL SALE in the Title field and SAVE 10% ON SELECTED PIECES in the Subtitle field.

You can edit the text for the other locales configured in your project by clicking Manage languages.

Finally, edit the text and link of the call to action button from the Call to action section. Enter the text you want. For example, To the sale in the Button label field and /home-decor in the Link field, which is the slug of the Home Decor product category page.

Edit the product slider

From the MAIN layout section, select the commercetools UI product slider Frontend component to open the Components settings pane.

In the Configuration section, enter On sale in the Title field and Explore our great products on sale for only a short amount of time in the Subline field.

The Configuration section in the Component settings pane with its Title and Subline fields filled with the values for the new page version

To filter the products with the promotional offer, you must add a data source filter. In the products field, you will find a reference to the Product list data source filter.

The products field in the Component settings pane with a list of data source filters and the Add data source filter button

Add a new data source filter with the name Featured home decor articles and a Product SKUs filter with a comma-separated list of SKUs. Enter the SKUs of the products you want to display in the slider. You can find these on the Merchant Center.

The data source filter editor with the Name field filled with the new value and the Product SKUs field containing a list of SKUs

Publish the new page version

Now that you've applied all the changes to the page version, it's time to preview it. If the preview looks as expected, go back to the page builder and save the page version.

After saving, the page version will still be a draft. You can publish the page version right away or schedule the page version to go live later. In this example, you would want to schedule the page version to only appear during the promotional sale. To do so, select the Seasonal Promotion page version and schedule it using the More icon. For further information on scheduling, see Scheduling page versions.