Before following this guide, make sure you've followed the guide on creating components. You're going to use the component created there.
We also suggest you read the Bloomreach Content documentation on creating pages (opens new window).
Once the project had been created, add a channel to it (e.g.
en) and click on the cog icon to set the preview URL for the channel. Hit
Save to confirm.
Next, go to the Experience Manager (opens new window). Make sure you're previewing your newly-created project and the component outlines are active (you can toggle them using the button next to the
+ Page one).
Next, click the blue
+ Page button. Give your page a name (e.g.
about), set its document type (
Bloomreach Content) and layout (
hst:pages/dynamic-page). Leave the rest (including the auto-generated URL) as-is.
Next button and - right after that - the
Create button to save your new page. It should now appear in the preview window, featuring two containers for components:
Good to know
In essence, pages in Bloomreach Content are simply documents. You can as well create them in the Documents section of the Content Application (opens new window). Locate the folder that corresponds to your channel and proceed to create a new document by filling out the form with the values mentioned above. This method serves as a viable alternative when encountering issues with creating pages using the Experience Manager.
In the Components sidebar on the left, click the
Vuestorefront Example. Hover your mouse over the
components-above-fold container and click it once the blue + icon appears.
Vuestorefront Example component is added to the container, hover over the orange magnifying glass icon. A plus button should appear below it. Click it to bring up the form for creating a new document. Give it some arbitrary name and click
In the next form, add values for simple text fields (
subtitle) as well as the button field group. For now, you can skip the Styles field. Click
Create to save the new document for your component. In the preview window, you should now see your
about page featuring a single Example component with a
Congratulations! You've just created your first page. Right now it can be viewed only in the Experience Manager, though. Merge your development project if you want it to be visible "in production" as well.