In this tutorial we will see how to create a page using the CMS Cockpit. We will create a new page accessible from ‘/last-product’ without coding anything and without restarting Hybris server. This is the workflow a content team should follow when they want to publish a new page with static or dynamic content within Hybris.

You need to access the CMS cockpit : http://localhost:9001/cmscockpit/index.zul
Replace localhost with your Hybris domain name or ip address if it’s not a local server !

Use the admin account (admin/nimda) to login.

Select the website ‘Electronics site’ in the staged version.

Look for the ‘+’ icon (create an item) it opens a new popup window to guide you trough a new page creation.

You are asked to select the page type, in our case we want to display content outside of a product or category context, so we choose content page.

You are asked to select a master template, select ‘Content Page 1 Template’. This will determine your page layouts and component possibilities.

Enter your page attribute, for example use ‘last-product’ for your page id and page name.

Now you are in front of your page layout, you can see all available content slots where you can add components. We will add a simple paragraph component into the content slot ‘Default Section 1’. Click on the ‘+’ icon next to the section name.

Enter a name for your component : ‘last-product-paragraph’

Click on the edit icon of your newly created component, we would like to add text in it.

Inside the content area enter the content of your paragraph : ‘Our last products are :
– A blue head tennis racket
– A pack of 10 pressure less tennis balls’.

Now we need to approve the page, click on the yellow icon ‘approval status’ and select ‘approved’.

Now in order to publish our page we need to add a ‘label’, for this click on the edit icon next to the approval status and synchronization icons. Enter a label for example ‘/last-product’, the slash is important without it your page won’t be accessible from ‘/last-product’.
After synch click on the red synchronization icon, it will turn green when the page is fully synchronized with the online catalog.

You can now access the new page, for example on a local installation : https://localhost:9002/yacceleratorstorefront/last-product?site=electronics