# Creating content in Bloomreach Content
# 1. Create project
First thing you have to do - in order to start adding content - you have to create a development project
in Projects Tab - select Projects on left sidebar.
Next add your channel to the project and click the gear icon to set your frontend URL for preview in Expeirence Manager.
# 2. Meet Expeirence Manager
You will find Expeirence Manager on sidebar on the left side of your screen, go there. Here you will be customizing your Vue Storefront application.
# On the left you will see a sidebar, there will be:
- Sitemap - this is a routes representation of your app, so all the pages you can customize
- Components - here you will see list of components you can use to create your content
# 3. Adding Components
Now, let's add some content.
- Select project you want to work on.
- Add your page to the project -
Page > Add to project
- Enable Bloomreach overlays.
- Click on the component on the sidebar, and then place the component within
main
section. - Now you will see blue, empty overlay and orange button, when you hover on the button you will see more of them. Click the plus icon to add new document to the component (documents are storing values for components).
- After the right sidebar will open, and you will be asked to provide documents
name
andID
, click next and you will see fields this documents accepts. - Fill in values and hit
create
Congratulations you added your first component!
# 4. Adding new Page
- Click
+ Page
on the control menu - Fill in details, the
URL
param will be the route where your page will be available so if you call itabout
this page will be accessible on the/about
route. - Document type should be
Resource Bundle
, ClickNext
. - Give your page an ID, click
Save
Nice! you just added completely new page!
# 5. Customizing Navigation
So now it would be cool to access our About
page from header navigation so lets add it.
On the Header you should see a blue icon
- Click on it, this will take you to
Edit Menu
page. - Click
+ Menu Item
- Fill in fields, and if you want this link to be pointing to another page you created via Bloomreach select
Internal link > Select > (modal window will open with all your documents) > pages > here all your pages are stored, just select the one you want
- Click
Save
and thenDone
on top
Congratulations! you customized header navigation!
# 6. Customize Footer Navigation
This one is pretty much like customizing header but with one difference.
- Add new item but with no link. This will create a column in footer, so give it a name
- Add new item and drag it to the left, this will nest the item inside the first item. to this one select a link just like you did for header.
- Hit Save and you're done.
Good job! your footer is now customized!
# 7. Publishing changes
- Click on the Channel Settings and Submit
- Noew you can go back to your Projects tab and review your project.
- Merge your project, after that step is complete you will be able to see changes you just made on your vuestorefront application!