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 Homepage > Live > V1 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 MAIN layout section, select one of the Hero Tile Frontend components. To edit the image, expand the Image section and replace the current image with the promotional image. Perform the same changes for the other Hero Tile component, to have the same banner on mobile or tablet and desktop.

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

Now, expand the Content section to add a link to the banner. Enter the text you want to display in the banner. For example, Sale on excavators in the Name field and select "/excavators", which is the slug of the excavators product category, in the Link field

Add a product slider

Drag the Product Slider component from Components > PRODUCTS to the MAIN section, and open the Components settings pane.

In the Content section, enter On sale in the Headline field.

The Configuration section in the Component settings pane with its Headline 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.

Add a new data source filter with the name Excavators and a Category filter for the excavators category.

The data source filter editor with the Name field set and the Category field set to Excavators

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.